/* ===================== v2 components ===================== */
.brand { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.wide { grid-column: 1 / -1; }
.context-select { max-width: 260px; padding: 0.35rem 0.5rem; border: 1px solid var(--border-color); border-radius: 0.375rem; background: var(--card-bg); }
.status .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger-color); display: inline-block; }
.status.connected .status-dot { background: var(--success-color); }
main { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem; }
.card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card h3, .card h4 { margin-bottom: 0.5rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.controls { display: flex; gap: 0.5rem; align-items: center; }
.controls.wrap { flex-wrap: wrap; }
.controls input, .controls select, .toolbar input, .toolbar select { padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: 0.375rem; }
.toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0; }
.week-label { font-weight: 600; min-width: 7rem; text-align: center; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.team-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .home-grid, .two-col, .team-layout, .matchup-grid, .draft-main, .trade-sides, .form-grid { grid-template-columns: 1fr !important; } }
.team-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.team-card.active { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.team-card:hover { background: var(--bg-color); }
.teams-grid { display: grid; gap: 0.75rem; }
.games-list.compact .game-card { padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.game-card .logo { width: 20px; height: 20px; vertical-align: middle; margin-right: 0.25rem; }
.live { color: var(--danger-color); font-weight: 600; }
.live-row { background: var(--orange-50); }
.table-wrap { overflow-x: auto; }
table.lineup-table, table.players-table, table.standings-table, table.gamelog-table, table.draft-board, table.kv { width: 100%; border-collapse: collapse; }
table.lineup-table td, table.players-table td, table.standings-table td, table.gamelog-table td, table.draft-board td, table.kv td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
table th { text-align: left; padding: 0.4rem 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 2px solid var(--border-color); }
table th.num { text-align: right; }
.lineup-table .slot, .slot-cell { font-weight: 700; width: 4.5rem; }
.lineup-table tr.bench { background: var(--slate-50); color: var(--text-muted); }
.lineup-table tr.changed { background: var(--blue-50); }
.lineup-table tr.empty-slot td { color: var(--text-muted); font-style: italic; }
.lineup-table tr.overflow { background: var(--red-50); }
.lineup-table.compact td { padding: 0.3rem 0.4rem; font-size: 0.9rem; }
.lineup-table .slot-select { padding: 0.25rem; }
.player-link { color: var(--primary-color); cursor: pointer; text-decoration: none; font-weight: 500; }
.player-link:hover { text-decoration: underline; }
.pos { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 0.25rem; background: var(--slate-200); }
.pos-QB { background: var(--red-100); } .pos-RB { background: var(--green-100); } .pos-WR { background: var(--blue-100); } .pos-TE { background: var(--amber-100); } .pos-K { background: var(--purple-100); } .pos-P { background: var(--fuchsia-100); } .pos-DEF { background: var(--indigo-100); }
.inj { font-size: 0.65rem; font-weight: 700; padding: 0.05rem 0.3rem; border-radius: 0.2rem; color: white; vertical-align: middle; }
.inj-q { background: var(--warning-color); } .inj-doubtful { background: #ea580c; } .inj-out { background: var(--danger-color); }
.lock { font-size: 0.8rem; }
.total-pts { font-weight: 700; font-size: 1.1rem; margin-right: 0.5rem; }
.warning { background: var(--amber-50); border: 1px solid var(--amber-200); padding: 0.4rem 0.6rem; border-radius: 0.375rem; font-size: 0.85rem; margin-bottom: 0.4rem; }
.pts { font-weight: 600; position: relative; cursor: default; }
.has-breakdown { border-bottom: 1px dotted var(--text-muted); }
.breakdown-pop { display: none; position: absolute; right: 0; top: 1.4rem; z-index: 50; background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); padding: 0.5rem; border-radius: 0.375rem; min-width: 220px; font-weight: 400; text-align: left; }
.has-breakdown:hover .breakdown-pop { display: block; }
table.breakdown td { padding: 0.15rem 0.4rem; font-size: 0.8rem; border: none; }
.list-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border-color); align-items: center; }
.list-row:last-child { border-bottom: none; }
.pager { display: flex; gap: 0.75rem; align-items: center; justify-content: center; margin: 1rem 0; }
.players-table tr.locked { opacity: 0.7; }
.waiver { color: var(--amber-700); font-weight: 600; }
.matchup-list { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.matchup-pill { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.75rem; border: 1px solid var(--border-color); border-radius: 2rem; background: var(--card-bg); cursor: pointer; font-size: 0.85rem; }
.matchup-pill.active { border-color: var(--primary-color); background: var(--blue-50); }
.matchup-pill.in_progress { border-color: var(--danger-color); }
.matchup-pill .vs { color: var(--text-muted); }
.matchup-header { text-align: center; margin-bottom: 0.5rem; }
.playoff-label { font-weight: 700; color: var(--primary-color); }
.matchup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mu-side { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 1rem; }
.mu-side h3 a { color: inherit; text-decoration: none; }
.mu-total { font-size: 2rem; font-weight: 800; margin: 0.25rem 0 0.5rem; }
.standings-table tr.playoff td:first-child { border-left: 3px solid var(--success-color); }
.standings-table tr.mine { background: var(--blue-50); }
.seed { font-size: 0.7rem; background: var(--success-color); color: white; border-radius: 50%; padding: 0.05rem 0.35rem; }
.tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--border-color); margin-bottom: 1rem; flex-wrap: wrap; }
.tab { padding: 0.5rem 0.9rem; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; }
.tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.rosters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.schedule-matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; padding: 0.4rem 0.6rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border-color); align-items: center; }
.schedule-matchup:hover { background: var(--bg-color); }
.schedule-matchup .schedule-team:last-child { text-align: right; }
.schedule-matchup .winner { font-weight: 700; }
.schedule-week { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; margin-bottom: 0.75rem; overflow: hidden; }
.schedule-week-header { background: var(--bg-color); padding: 0.4rem 0.6rem; font-weight: 700; }
.waiver-order { padding-left: 1.25rem; }
.badge { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 1rem; background: var(--slate-200); text-transform: uppercase; font-weight: 700; }
.badge.completed { background: var(--green-100); } .badge.in_review, .badge.accepted { background: var(--amber-100); } .badge.vetoed, .badge.rejected, .badge.cancelled { background: var(--red-100); } .badge.live { background: var(--danger-color); color: white; }
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.5rem 0; }
.check { display: block; padding: 0.15rem 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
form fieldset { border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; }
legend { font-weight: 700; padding: 0 0.4rem; text-transform: capitalize; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem; }
.scoring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.scoring-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.scoring-item input[type=number], .scoring-item select { width: 6em; padding: 0.3rem; border: 1px solid var(--border-color); border-radius: 0.3rem; }
.bonus-row { justify-content: flex-start; }
.bonus-row select { width: auto; }
.code { font-family: ui-monospace, monospace; background: var(--bg-color); padding: 0.1rem 0.4rem; border-radius: 0.25rem; letter-spacing: 0.1em; }
.join-code-display .code { font-size: 1.5rem; }
.dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1000; }
.toast { background: #1e293b; color: white; padding: 0.6rem 1rem; border-radius: 0.375rem; opacity: 0; transform: translateY(10px); transition: all 0.25s; max-width: 380px; font-size: 0.9rem; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--danger-color); } .toast.success { background: var(--green-700); }
.player-modal-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem; }
.player-modal-header .headshot { width: 80px; height: 60px; object-fit: cover; border-radius: 0.375rem; background: var(--bg-color); }
.player-modal-info { flex: 1; }
.stat-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.tile { background: var(--bg-color); border-radius: 0.375rem; padding: 0.5rem 0.9rem; min-width: 90px; text-align: center; }
.tile-value { font-size: 1.3rem; font-weight: 700; }
.tile-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.draft-header { display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.draft-header.my-turn { border-color: var(--success-color); background: var(--green-50); }
.draft-main { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.draft-timer { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.draft-timer.warning { color: var(--warning-color); } .draft-timer.danger { color: var(--danger-color); }
.draft-player-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--border-color); }
.draft-order-list li.my-team { font-weight: 700; color: var(--primary-color); }
.draft-board td { border: 1px solid var(--border-color); }
.btn.small { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.btn.danger { background: var(--danger-color); color: white; border-color: var(--danger-color); }
.kv td:first-child { color: var(--text-muted); width: 40%; }
td.warn { color: var(--danger-color); font-weight: 700; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.performer-card { cursor: pointer; }
.activity-icon.waiver { background: var(--amber-100); } .activity-icon.commissioner { background: var(--indigo-100); }
.form-error { color: var(--danger-color); margin: 0.5rem 0; }
details summary { cursor: pointer; margin: 0.5rem 0; }
.sl-team summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; flex-wrap: wrap; }
.sl-nums { font-variant-numeric: tabular-nums; }
.ok { color: var(--green-700); } .warn-soft { color: var(--amber-700); } .warn { color: var(--danger-color); font-weight: 600; }
.stat-diff { display: inline-block; background: var(--orange-50); border: 1px solid var(--orange-200); border-radius: 0.25rem; padding: 0 0.3rem; margin: 0.1rem 0; }
.sl-split { color: var(--text-muted); }
/* Why a team total differs: which players each side started, and for how much. */
.sl-recon { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.5rem 0.65rem; margin: 0.25rem 0 0.75rem; }
.sl-recon-head { font-size: 0.85rem; margin-bottom: 0.4rem; }
.sl-sides { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.sl-side { flex: 1 1 14rem; min-width: 0; }
.sl-side-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.sl-side-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.1rem 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sl-side-row.total { border-top: 1px solid var(--border-color); color: var(--text-muted); }
/* A player the mirror started who is not in our lineup at all. */
.lineup-table tr.sl-not-ours { background: var(--orange-50); }
.sl-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 0.25rem; background: var(--orange-100); color: var(--orange-800); cursor: help; }

/* Highlights -------------------------------------------------------------- */
.highlight-reel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.highlight-download { font-size: 0.8rem; }
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 12px;
}
.highlight {
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
}
.highlight video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}
.highlight figcaption { padding: 10px 12px; }
.highlight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.highlight-player { font-weight: 600; }
.highlight-points { font-variant-numeric: tabular-nums; font-weight: 700; position: relative; cursor: help; }
.highlight-breakdown {
  /* Opens upward, over the video: .highlight clips anything below the card. */
  display: none; position: absolute; right: 0; bottom: 100%; z-index: 5; min-width: 200px;
  margin-bottom: 4px; padding: 8px 10px; border-radius: 6px; font-weight: 400;
  background: var(--card-bg, #1f2430); color: var(--text-color, #f2f4f8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.highlight-breakdown div { display: flex; justify-content: space-between; gap: 16px; font-size: .85em; line-height: 1.6; }
.highlight-points:hover .highlight-breakdown,
.highlight-points:focus .highlight-breakdown { display: block; }
.highlight-meta { margin: 2px 0 0; font-size: .8em; color: var(--text-muted, #8a93a6); }
.highlight-others { margin: 6px 0 0; font-size: .8em; color: var(--text-muted, #8a93a6); }
.highlight-points.ok  { color: var(--success-color); }
.highlight-points.bad { color: var(--danger-color); }
.highlight-text {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.35;
}
@media (max-width: 480px) {
  .highlight-grid { grid-template-columns: 1fr; padding: 8px; }
}

/* RedZone control room ---------------------------------------------------- */
.rz .badge { text-transform: none; font-weight: 600; white-space: nowrap; }
.rz .badge.ok { background: var(--green-100); color: var(--green-800); }
.rz .badge.warn { background: var(--amber-100); color: var(--amber-800); }
.rz .badge.bad { background: var(--red-100); color: var(--red-800); }
.rz-modes { display: inline-flex; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; }
.rz-modes button { background: transparent; border: 0; border-right: 1px solid var(--border-color);
  padding: 0.45rem 1.1rem; font: inherit; cursor: pointer; color: inherit; }
.rz-modes button:last-child { border-right: 0; }
.rz-modes button.on { background: var(--primary-color); color: #fff; font-weight: 600; }
.rz-modes button.on.off { background: var(--text-muted); }
.rz-modes button.on.manual { background: var(--warning-color); color: #1a1205; }
.rz-strategy button { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.rz-strategy button.on { background: var(--text-color); color: var(--bg-color, #fff); }
.rz-head { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.rz-status { color: var(--text-muted); }
.rz-status b { color: var(--text-color); }
.rz-overlay { display: flex; gap: 1rem; margin-left: auto; font-size: 0.9rem; }
.rz-overlay label { display: flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.rz-body { display: grid; gap: 1.25rem; grid-template-columns: minmax(250px, 340px) 1fr; margin-top: 1rem; }
@media (max-width: 760px) { .rz-body { grid-template-columns: 1fr; } }
.rz-sub { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
  font-weight: 600; margin-bottom: 0.5rem; }
.rz-preview { display: grid; gap: 3px; aspect-ratio: 16 / 9; background: #000; border-radius: 0.375rem;
  padding: 3px; margin-bottom: 0.75rem; }
.rz-tile { background: #1f2937; color: #e5e7eb; border-radius: 3px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; padding: 4px; position: relative;
  cursor: pointer; min-width: 0; font-size: 0.8rem; }
.rz-tile .nm { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-tile .pg { color: #9ca3af; font-size: 0.72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-tile.snd { outline: 2px solid var(--success-color); }
.rz-tile .sndtag { position: absolute; top: 3px; left: 6px; font-size: 0.62rem; color: var(--success-color); font-weight: 700; }
.rz-tile.blank { background: #0b0f14; cursor: default; color: #9ca3af; }
.rz-tile.panel { background: #0d1420; border-left: 3px solid #d62828; }
.rz-overlay select { padding: 0.1rem 0.25rem; font-size: 0.85rem; }
.rz-picked .pk { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.rz-picked .pk label { display: flex; gap: 0.4rem; align-items: center; flex: 1; min-width: 0; cursor: pointer; }
.rz-picked .x { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: 0 0.3rem; }
.rz-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.rz-filters input[type=search] { flex: 1; min-width: 140px; }
.rz-filters input[type=search], .rz-filters select, .rz select { padding: 0.35rem 0.55rem; border: 1px solid var(--border-color);
  border-radius: 0.375rem; background: var(--card-bg); }
.rz-list { max-height: 440px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 0.375rem; }
.rz-ch { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-color);
  cursor: pointer; font-size: 0.88rem; }
.rz-ch:last-child { border-bottom: 0; }
.rz-ch:hover { background: var(--slate-50); }
.rz-ch.sel { background: var(--blue-50, var(--slate-100)); }
.rz-ch.dis { opacity: 0.45; cursor: not-allowed; }
.rz-ch .box { width: 18px; height: 18px; border: 1px solid var(--text-muted); border-radius: 4px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.rz-ch.sel .box { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.rz-ch .num { width: 4.4em; flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rz-ch .nm { width: 7.5em; flex: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-ch .pg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.rz-ch .tags { display: flex; gap: 0.25rem; flex: none; }
@media (max-width: 520px) { .rz-ch .pg { display: none; } .rz-ch .nm { flex: 1; width: auto; } }
.rz-msg { min-height: 1.3em; font-size: 0.86rem; margin-top: 0.4rem; }
.rz-msg.ok { color: var(--success-color); } .rz-msg.warn { color: var(--warning-color); } .rz-msg.bad { color: var(--danger-color); }
.rz-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-bottom: 1rem; }
.rz-cards .card { margin-bottom: 0; }
.rz-big { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.25rem; }
.rz-why { color: var(--text-muted); font-size: 0.8rem; }
.rz-log td { vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-color); }
.rz-log td.t { color: var(--text-muted); white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.rz-log details summary { cursor: pointer; }
.rz-cfg { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 0.75rem; }
.rz-cfg h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.rz-cfg table.kv td { padding: 0.25rem 0.4rem; font-size: 0.82rem; }
.rz-cfg table.kv td:last-child { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Box score ---------------------------------------------------------------- */
.game-card.clickable { cursor: pointer; transition: border-color .12s, transform .12s; }
.game-card.clickable:hover { border-color: var(--primary-color); transform: translateY(-1px); }
/* The shared .modal-large is 600px at 80vh -- fine for a player card, far too
   cramped for two teams of stat tables. Scoped so the player modal is
   unaffected. */
#game-modal .modal-content {
  max-width: min(1500px, 96vw);
  width: 96%;
  max-height: 92vh;
  padding: 1.25rem 1.5rem;
}
.bs-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}
.bs-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bs-header > .bs-team:last-child { flex-direction: row-reverse; }
.bs-team .logo { width: 32px; height: 32px; object-fit: contain; }
.bs-team-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-team-score { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-status { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.bs-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.bs-side {
  margin: 0 0 8px; font-size: .95rem;
  position: sticky; top: 0;
  background: var(--card-bg); padding: 4px 0; z-index: 1;
}
.bs-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: .8rem; }
.bs-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 3px 6px; }
.bs-table th.n, .bs-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.bs-table td { padding: 2px 6px; border-top: 1px solid var(--border-color); line-height: 1.3; }
.bs-row { cursor: pointer; }
.bs-row:hover { background: var(--bg-color); }
.bs-row.owned td:first-child { border-left: 2px solid var(--primary-color); }
.bs-player { font-weight: 500; }
.bs-pos { color: var(--text-muted); font-size: .75rem; }
.bs-owner { display: block; font-size: .7rem; color: var(--primary-color); line-height: 1.1; }
.bs-more {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: var(--primary-color); font-size: .75rem;
  padding: 2px 6px 8px;
}
.bs-more:hover { text-decoration: underline; }
.bs-header { padding-top: 0; }
@media (max-width: 720px) {
  .bs-sides { grid-template-columns: 1fr; }
  .bs-header { gap: 6px; }
  .bs-team-name { display: none; }
}

/* Scoring summary ---------------------------------------------------------- */
.sc-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sc-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--border-color); }
.sc-table th.n, .sc-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.sc-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.sc-type { display: block; font-weight: 600; }
.sc-text { display: block; color: var(--text-muted); font-size: .8rem; line-height: 1.35; }
.logo.sm { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }

/* Drives / play-by-play ---------------------------------------------------- */
.drive { border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 8px; background: var(--card-bg); }
.drive.scored { border-left: 3px solid var(--primary-color); }
.drive > summary {
  display: grid;
  grid-template-columns: 74px 120px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: .85rem;
  list-style: none;
}
.drive > summary::-webkit-details-marker { display: none; }
.drive > summary::before { content: '▸'; color: var(--text-muted); margin-right: -4px; }
.drive[open] > summary::before { content: '▾'; }
.drive > summary:hover { background: var(--bg-color); }
.drive-team { font-weight: 700; }
.drive-result { font-weight: 600; }
.drive.scored .drive-result { color: var(--primary-color); }
/* The drive still being played, so it does not read as one more finished one. */
.drive.current { border-left: 3px solid var(--danger-color); }
.drive.current .drive-result { color: var(--danger-color); }
.drive-meta { color: var(--text-muted); font-size: .78rem; }
.drive-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.pbp-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pbp-table td { padding: 4px 8px; border-top: 1px solid var(--border-color); vertical-align: top; }
.pbp-when { white-space: nowrap; color: var(--text-muted); width: 74px; }
.pbp-down { white-space: nowrap; color: var(--text-muted); width: 72px; }
.pbp-text { line-height: 1.35; }
.pbp-table tr.scoring { background: color-mix(in srgb, var(--success-color) 12%, transparent); font-weight: 600; }
.pbp-table tr.turnover { background: color-mix(in srgb, var(--danger-color) 10%, transparent); }
@media (max-width: 720px) {
  .drive > summary { grid-template-columns: 54px 1fr auto; }
  .drive-meta { grid-column: 1 / -1; }
}

/* Last play on a live game card ------------------------------------------- */
.game-lastplay {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
  font-size: .74rem;
  line-height: 1.3;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* This week's matchup on a team card --------------------------------------- */
.team-matchup {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 2px;
  font-size: .8rem;
}
.team-matchup .tm-opp { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-matchup .tm-score { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.team-matchup.ahead .tm-score, .team-matchup.win .tm-score { color: var(--success-color); }
.team-matchup.behind .tm-score, .team-matchup.loss .tm-score { color: var(--danger-color); }
.team-matchup .tm-label { color: var(--primary-color); font-size: .72rem; }
.stat-untracked { display: inline-block; color: var(--text-muted); font-style: italic; }
/* Hover popups for stat differences reuse the points breakdown pattern, so
   every difference is readable at once instead of truncated into the cell.
   Nothing between the trigger and the page clips overflow, so the popup is
   free to spill out of the row. */
.stat-diff.has-breakdown, .stat-untracked.has-breakdown { position: relative; cursor: help; }
.stat-untracked.has-breakdown { border-bottom: 1px dotted var(--text-muted); }
.breakdown-pop.wide { min-width: 18rem; max-width: min(28rem, 80vw); max-height: 16rem; overflow-y: auto; }
table.breakdown th { padding: 0.15rem 0.4rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-align: left; white-space: nowrap; border: none; border-bottom: 1px solid var(--border-color); }
table.breakdown th.num, table.breakdown td.num { text-align: right; }

/* Pick'em and survivor pools --------------------------------------------- */
.picks-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .picks-layout { grid-template-columns: 1fr; } }

/* One row per NFL game: the two teams are the choice. */
.pick-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, auto) auto auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--border-color);
}
.pick-row.locked { opacity: .85; }
.pick-row.live-row { background: color-mix(in srgb, var(--warning-color) 8%, transparent); }
.pick-teams { display: flex; align-items: center; gap: .4rem; }
.pick-at { color: var(--text-muted); font-size: .8rem; }

.pick-choice {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem;
  border: 2px solid var(--border-color); border-radius: 6px;
  background: var(--card-bg); color: var(--text-color);
  font-weight: 600; font-size: .85rem; cursor: pointer;
}
.pick-choice:hover:not(:disabled) { border-color: var(--primary-color); }
.pick-choice:disabled { cursor: default; }
.pick-choice .logo { width: 20px; height: 20px; object-fit: contain; }
.pick-choice.chosen { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg)); }
/* Survivor: a team already spent this season is not a legal pick. */
.pick-choice.spent { opacity: .45; text-decoration: line-through; }
.pick-choice.won { border-color: var(--success-color); }

.pick-conf select { width: 4.5rem; }
.pick-outcome { text-align: right; min-width: 4.5rem; }
.pick-result { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pick-result.win { color: var(--success-color); }
.pick-result.loss { color: var(--danger-color); }
.pick-result.push { color: var(--text-muted); }
.pick-result.pending { color: var(--warning-color); font-weight: 600; font-size: .75rem; }
.tiebreak { margin-top: .75rem; max-width: 26rem; }

/* The rest of the pool's cards for the week. */
.pool-row {
  display: grid; grid-template-columns: minmax(6rem, 1fr) 2fr auto;
  gap: .5rem; align-items: center;
  padding: .35rem 0; border-bottom: 1px solid var(--border-color);
}
.pool-row.mine { font-weight: 600; }
.pool-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-picks { display: flex; flex-wrap: wrap; gap: .2rem; }
.pool-pick {
  padding: .05rem .3rem; border-radius: 4px; font-size: .72rem; font-weight: 600;
  background: var(--bg-color); border: 1px solid var(--border-color);
}
.pool-pick.win { background: color-mix(in srgb, var(--success-color) 18%, transparent); border-color: var(--success-color); }
.pool-pick.loss { background: color-mix(in srgb, var(--danger-color) 15%, transparent); border-color: var(--danger-color); }
.pool-pick.hidden-pick { color: var(--text-muted); font-style: italic; }
.standings-table tr.eliminated { opacity: .6; }

/* Stat Stack ---------------------------------------------------------------- */
.ss-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .ss-layout { grid-template-columns: 1fr; } }

.ss-status { margin-bottom: .75rem; }
.ss-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ss-pill {
  padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  background: color-mix(in srgb, var(--success-color) 18%, transparent); color: var(--success-color);
}
.ss-pill.locked { background: color-mix(in srgb, var(--warning-color) 18%, transparent); color: var(--warning-color); }
.ss-pill.final { background: var(--bg-color); color: var(--text-muted); }
.ss-deadline { font-size: .85rem; font-variant-numeric: tabular-nums; }
.ss-mine { margin-left: auto; font-size: .9rem; }
.ss-cta { margin-left: auto; font-size: .85rem; color: var(--text-muted); }

.ss-round { margin-bottom: 1rem; }
.ss-round.void { opacity: .7; }
.ss-round h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.ss-round-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--primary-color); color: #fff; font-size: .8rem; font-weight: 700;
}
.ss-round-note { font-size: .8rem; color: var(--text-muted); }
.ss-round-note.hit { color: var(--success-color); font-weight: 700; }
.ss-round-note.unsaved { color: var(--warning-color); font-weight: 600; }
.ss-round-note.open { color: var(--primary-color); }
.ss-live {
  margin-right: .5rem; padding: .05rem .4rem; border-radius: 4px; font-size: .7rem; font-weight: 700;
  background: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color);
}

/* The 3x3 grid of candidates. */
.ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 520px) { .ss-grid { grid-template-columns: repeat(2, 1fr); } }

.ss-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem .4rem .5rem; border: 2px solid var(--border-color); border-radius: 8px;
  background: var(--card-bg); color: var(--text-color); text-align: center; font: inherit;
  /* A long press on a tile opens the game log, so suppress the native
     selection and callout that would otherwise fight it. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* The pick target lies under the tile's content rather than wrapping it: a link
   inside a button is retargeted to the button on touch, which left the player's
   name untappable on a phone. */
.ss-pick { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.ss-tile > *:not(.ss-pick) { position: relative; pointer-events: none; }
.ss-tile > .ss-name { pointer-events: auto; }
.ss-tile.pickable { cursor: pointer; }
.ss-tile.pickable:hover { border-color: var(--primary-color); background: var(--bg-color); }
.ss-pick:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.ss-tile.chosen { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); }
.ss-tile.leader { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--success-color) 45%, transparent); }
.ss-tile.bye { opacity: .6; }

/* Where a player is in the week, from Thursday on: still to come, on the field
   now, or done. Only the fill, and after .chosen rather than before it, so that
   a tile you picked still says where its player is -- the pick itself is in the
   border and the tick, which these leave alone. */
.ss-tile.toplay { background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg)); }
.ss-tile.live { background: color-mix(in srgb, var(--warning-color) 14%, var(--card-bg)); }
.ss-tile.done { background: color-mix(in srgb, var(--text-muted) 12%, var(--card-bg)); }
/* A player who is finished recedes a little further than the fill alone manages. */
.ss-tile.done .ss-face { opacity: .8; }

/* The key to that shading, shown only while it is on the tiles. */
.ss-key { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.ss-key-item { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 500; color: var(--text-muted); }
.ss-key-item::before {
  content: ''; width: .65rem; height: .65rem; border-radius: 3px;
  border: 1px solid var(--border-color); background: var(--card-bg);
}
/* The swatches carry the tile colours at a strength a 10px square can show. */
.ss-key-item.toplay::before { background: color-mix(in srgb, var(--primary-color) 25%, var(--card-bg)); border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color)); }
.ss-key-item.live::before { background: color-mix(in srgb, var(--warning-color) 40%, var(--card-bg)); border-color: color-mix(in srgb, var(--warning-color) 65%, var(--border-color)); }
.ss-key-item.done::before { background: color-mix(in srgb, var(--text-muted) 28%, var(--card-bg)); border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border-color)); }

.ss-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg-color); }
.ss-name { font-weight: 600; font-size: .8rem; line-height: 1.15; }
.ss-meta { font-size: .7rem; color: var(--text-muted); }
.ss-meta .inj { color: var(--danger-color); font-weight: 700; }
.ss-form { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ss-check {
  position: absolute; top: .3rem; right: .4rem;
  color: var(--primary-color); font-weight: 700; font-size: .9rem;
}

/* How much of the field is on this player. */
.ss-crowd { display: flex; align-items: center; gap: .25rem; width: 100%; margin-top: .25rem; }
.ss-crowd-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border-color); overflow: hidden; }
.ss-crowd-bar span { display: block; height: 100%; background: var(--primary-color); }
.ss-crowd-pct { font-size: .65rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }

.ss-actual { display: flex; align-items: baseline; gap: .3rem; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.ss-actual b { font-size: 1rem; }
.ss-actual.pending { min-height: 1.2rem; }
.ss-rank { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
.ss-rank.first { color: var(--success-color); }

/* Sticky save bar: the card is never submitted a tile at a time. */
.ss-savebar { position: sticky; bottom: 0; z-index: 5; padding: .5rem 0; }
.ss-savebar-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .9rem; border: 1px solid var(--primary-color); border-radius: 8px;
  background: var(--card-bg); box-shadow: var(--shadow-lg); font-size: .9rem;
}

.ss-payouts { display: grid; gap: .2rem; }
.ss-payout { display: grid; grid-template-columns: 2.2rem 1fr 2.2rem; align-items: center; gap: .4rem; font-size: .75rem; }
.ss-payout-rank { color: var(--text-muted); }
.ss-payout-bar { height: 8px; border-radius: 4px; background: var(--border-color); overflow: hidden; }
.ss-payout-bar span { display: block; height: 100%; background: var(--primary-color); }
.ss-payout.first .ss-payout-bar span { background: var(--success-color); }
.ss-payout.first .ss-payout-pts { font-weight: 700; color: var(--success-color); }
.ss-payout-pts { text-align: right; font-variant-numeric: tabular-nums; }
.tabs.compact .tab { padding: .2rem .5rem; font-size: .75rem; }

/* Home page teaser */
.ss-teaser { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ss-teaser-stat { font-size: .85rem; }
.ss-band {
  margin-left: .4rem; padding: .1rem .4rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: color-mix(in srgb, var(--warning-color) 18%, transparent); color: var(--warning-color);
}
.ss-band.deep { background: color-mix(in srgb, var(--primary-color) 16%, transparent); color: var(--primary-color); }
.ss-band-note { margin: -.25rem 0 .5rem; }

/* A grid name is its own target: the game log, not the pick underneath. */
.ss-name.player-link { cursor: pointer; text-decoration: underline dotted var(--border-color); text-underline-offset: 2px; }
.ss-name.player-link:hover { color: var(--primary-color); text-decoration-color: var(--primary-color); }
.gamelog-table .highlight-col { background: color-mix(in srgb, var(--primary-color) 8%, transparent); font-weight: 700; }
.stat-tiles .tile.highlight .tile-value { color: var(--primary-color); }

/* Mobile: the name needs a finger-sized target, and the grid gets tight. */
@media (max-width: 640px) {
  .ss-name.player-link { display: block; width: 100%; padding: .3rem 0; font-size: .82rem; }
  .ss-grid { gap: .4rem; }
  .ss-tile { padding: .5rem .3rem .45rem; }
  .ss-face { width: 38px; height: 38px; }
}

/* Mobile header ------------------------------------------------------------
   Ten nav links in a wrapping, sticky header took four rows and about half a
   phone screen, permanently. On a phone the nav becomes a panel behind a
   button and the header stays one short row.

   The button comes FIRST in that row. Everything else in the header -- the
   brand, the league select, the week, the account -- is wider than a phone put
   together, and with nowrap the last item is simply pushed off the edge; when
   the button was last, it was the one thing you could not see. */
.nav-toggle { display: none; }
.theme-btn { padding: 0.35rem 0.6rem; font-size: 1rem; line-height: 1; }

@media (max-width: 768px) {
  header {
    flex-direction: row;          /* the base stylesheet stacks this into a column */
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    padding: .5rem .6rem;
  }

  .nav-toggle {
    order: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem;
    border: 1px solid var(--border-color); border-radius: .375rem;
    background: var(--card-bg); color: var(--text-color);
    font-size: 1.15rem; line-height: 1; cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

  /* The brand gives up its width first, and ellipsises rather than pushing. */
  header h1 { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; }
  header h1 .brand { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .header-right { order: 2; flex: 0 1 auto; min-width: 0; gap: .35rem; }
  .context-select { flex: 0 1 auto; min-width: 0; max-width: 30vw; }
  #user-display-name { max-width: 4.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .user-menu .btn { padding: .35rem .55rem; font-size: .78rem; }
  .theme-btn { padding: .3rem .45rem; font-size: .9rem; }
  #connection-status .status-text { font-size: .65rem; }

  /* Out of flow, so the header keeps its single row whether it is open or not. */
  #main-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: .15rem;
    padding: .5rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    max-height: 75vh; overflow-y: auto;
  }
  #main-nav.open { display: flex; }
  #main-nav .nav-link { padding: .7rem .9rem; }
}

/* On a phone proper, drop what every page already tells you anyway. */
@media (max-width: 480px) {
  header h1 { font-size: .95rem; }
  #connection-status { display: none; }   /* the week is in the page header */
  #user-display-name { display: none; }   /* the Logout button is what is needed here */
  .context-select { max-width: 36vw; }
}

/* Advice (team page lineup box and panels; league odds / report / injury tabs) */
.adv-line { padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; border-radius: 0.375rem; background: var(--slate-50); border: 1px solid var(--border-color); font-size: 0.9rem; }
.adv-line.adv-better { background: var(--blue-50); border-color: var(--blue-200); }
.adv-line .btn { margin-top: 0.4rem; }
#adv-body .card { box-shadow: none; border: none; padding: 0.5rem 0; margin-bottom: 0.5rem; }
.mgr-summary { font-size: 0.95rem; }
.mgr-up { color: var(--green-700); font-weight: 600; }
.mgr-down { color: var(--danger-color); font-weight: 600; }
.mgr-warnings { background: var(--orange-50); border: 1px solid var(--orange-200); border-radius: 0.375rem; padding: 0.5rem 0.75rem; margin-bottom: 1rem; color: var(--orange-800); font-size: 0.9rem; }
.badge.mgr-alert { background: var(--red-100); color: var(--red-800); }
.mgr-bar { display: inline-block; width: 6rem; height: 0.5rem; background: var(--border-color); border-radius: 0.25rem; overflow: hidden; vertical-align: middle; margin-right: 0.35rem; }
.mgr-bar span { display: block; height: 100%; background: var(--primary-color); }
.mgr-odds { white-space: nowrap; }
.mgr-lev { margin-left: auto; font-size: 0.85rem; }
.list-row .mgr-lev { float: right; }
.mgr-trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.75rem 0; }
.mgr-pick { max-height: 18rem; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.25rem 0.5rem; }
.mgr-check { display: block; padding: 0.2rem 0; cursor: pointer; font-size: 0.9rem; }
.mgr-side h5, .mgr-trade-grid h5 { margin-bottom: 0.35rem; }
.mgr-verdict { margin-top: 0.75rem; font-size: 1rem; }
.mgr-idea { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.mgr-mycard { display: flex; gap: 1rem; align-items: center; }
.mgr-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; border-radius: 0.5rem; font-size: 1.4rem; font-weight: 800; background: var(--slate-200); }
.mgr-grade.small { min-width: 2rem; height: 1.6rem; font-size: 0.85rem; border-radius: 0.3rem; }
.mgr-grade.grade-A { background: var(--green-100); color: var(--green-800); }
.mgr-grade.grade-B { background: var(--blue-100); color: var(--blue-800); }
.mgr-grade.grade-C { background: var(--amber-100); color: var(--amber-800); }
.mgr-grade.grade-D, .mgr-grade.grade-F { background: var(--red-100); color: var(--red-800); }
.mgr-inj { border-left: 3px solid var(--border-color); padding-left: 0.6rem; }
.mgr-inj.sev-4 { border-left-color: var(--danger-color); }
.mgr-inj.sev-3 { border-left-color: var(--warning-color); }
.mgr-inj.sev-2 { border-left-color: var(--amber-200); }
@media (max-width: 640px) {
  .mgr-trade-grid { grid-template-columns: 1fr; }
  .list-row .mgr-lev { float: none; display: block; }
}

/* "Where does this number come from?" popover */
.explainable { cursor: help; border-bottom: 1px dotted var(--text-muted); }
.explain-pop { position: absolute; z-index: 2000; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(15,23,42,0.18); padding: 0.75rem 0.9rem; max-height: 70vh; overflow-y: auto; font-size: 0.85rem; text-align: left; }
.explain-pop.hidden { display: none; }
.explain-pop .ex-head { margin-bottom: 0.5rem; }
.explain-pop .ex-total { font-size: 1.3rem; font-weight: 700; }
.explain-pop .ex-sec { border-top: 1px solid var(--border-color); padding-top: 0.45rem; margin-top: 0.45rem; }
.explain-pop .ex-label { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
.explain-pop .ex-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; }
.explain-pop .ex-table { width: 100%; border-collapse: collapse; }
.explain-pop .ex-table td { padding: 0.2rem 0.25rem; border-bottom: 1px solid var(--slate-100); vertical-align: top; }
.explain-pop .ex-sum td { font-weight: 700; border-bottom: none; }
.explain-pop .ex-tag { font-size: 0.65rem; padding: 0 0.3rem; border-radius: 0.25rem; background: var(--amber-100); color: var(--amber-800); font-weight: 700; text-transform: uppercase; }
.players-table .proj-lead { font-weight: 700; font-size: 1rem; }
/* Matchup projections */
.mu-projline { margin: -0.25rem 0 0.5rem; }
.mu-proj { color: var(--text-muted); font-size: 0.85rem; }
.mu-winbar { height: 0.4rem; background: var(--slate-300); border-radius: 0.2rem; overflow: hidden; margin: 0.25rem 0 0.75rem; }
.mu-winbar span { display: block; height: 100%; background: var(--primary-color); }

/* Auto-manage */
.badge.ap-dry_run { background: var(--amber-100); color: var(--amber-800); }
.badge.ap-live { background: var(--red-100); color: var(--red-800); }
.ap-log { max-height: 22rem; overflow-y: auto; }
.ap-entry { border-top: 1px solid var(--border-color); padding: 0.35rem 0; font-size: 0.85rem; }
.ap-entry summary { cursor: pointer; }
.ap-when { color: var(--text-muted); font-size: 0.75rem; }
.ap-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 0 0.3rem; border-radius: 0.25rem; background: var(--slate-200); }
.ap-planned .ap-status { background: var(--amber-100); } .ap-sent .ap-status { background: var(--green-100); } .ap-refused .ap-status, .ap-failed .ap-status { background: var(--red-100); }
.ap-json { background: var(--slate-50); border: 1px solid var(--border-color); border-radius: 0.25rem; padding: 0.4rem; font-size: 0.72rem; overflow-x: auto; max-height: 14rem; }

/* League history (history.js) and manager profiles (pages/manager.js) */
.hist-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mgr-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-muted); }
.mgr-link:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.bracket { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: 0.25rem; }
.bracket-round { flex: 0 0 15rem; display: flex; flex-direction: column; gap: 0.6rem; }
.bracket-round-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.bracket-game { border: 1px solid var(--border-color); border-radius: 0.375rem; overflow: hidden; background: var(--card-bg); }
.bracket-game.consolation { opacity: 0.7; border-style: dashed; }
.bracket-label { font-size: 0.7rem; color: var(--text-muted); padding: 0.15rem 0.5rem; background: var(--bg-color); }
.bracket-team { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.bracket-team + .bracket-team { border-top: 1px solid var(--border-color); }
.bracket-team.winner { font-weight: 700; background: var(--green-50); }
.records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.records-grid .card { margin-bottom: 0; }
.records-grid .list-row { font-size: 0.85rem; justify-content: flex-start; }
table.h2h-table { border-collapse: collapse; font-size: 0.82rem; }
table.h2h-table th, table.h2h-table td { padding: 0.35rem 0.5rem; border: 1px solid var(--border-color); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.h2h-table tbody th { text-align: left; text-transform: none; letter-spacing: 0; font-size: 0.82rem; color: var(--text-color); }
.h2h-cell { cursor: pointer; }
.h2h-cell:hover { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.h2h-up { background: var(--green-100); } .h2h-down { background: var(--red-100); }
.h2h-self { background: var(--bg-color); }
.profile-head { display: flex; gap: 0.9rem; align-items: center; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg-color); }
.profile-tiles { flex-wrap: wrap; }
table.rules-table { border-collapse: collapse; font-size: 0.82rem; }
table.rules-table td, table.rules-table th { padding: 0.25rem 0.55rem; border-bottom: 1px solid var(--border-color); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rules-table .rules-section td { font-weight: 700; background: var(--bg-color); padding-top: 0.45rem; }
table.rules-table .rules-starters td { font-weight: 700; }
td.rule-changed { background: var(--amber-100); font-weight: 700; }
.rule-changes .list-row { font-size: 0.85rem; }
td.has-note { position: relative; cursor: help; }
td.has-note::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent var(--primary-color) transparent transparent; }
.rule-note { font-size: 0.75rem; color: var(--text-muted); }
.rule-draft { margin-top: 0.5rem; }
.rules-about { color: var(--text-muted); margin-bottom: 0.5rem; }

/* Points the opponent allows to a position: the average, its rank, and a tint for the easy and hard thirds */
.allowed { white-space: nowrap; }
.allowed-rank { margin-left: 0.3em; font-size: 0.75em; color: var(--text-muted); }
.allowed-easy { color: var(--green-700); }
.allowed-hard { color: var(--red-700); }
.mu-allowed { font-size: 0.85rem; }

/* Column headers that sort on click */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text-color); }
th.sorted { color: var(--text-color); }
.sort-arrow { margin-left: 0.25em; font-size: 0.7em; }

/* Projection audit: busts and booms side by side when there is room */
.audit-misses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; }
.audit-misses .card { margin: 0; }

/* Installed app on a notched phone. viewport-fit=cover lets the page run under
   the notch (landscape) and the home indicator; these keep content out from
   under them. Each inset is 0 in a plain browser tab, so nothing moves there. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.toasts { bottom: calc(1rem + env(safe-area-inset-bottom)); right: calc(1rem + env(safe-area-inset-right)); }