/* The page is a fixed-height column: controls and tabs size to content, the table takes the
   remaining space and scrolls, and the detail panel is pinned across the bottom. */

:root {
	--bg: #0a1220;
	--surface: #0d1526;
	--surface-raised: #101a2e;
	--band: #16233d;
	--border: rgba(255, 255, 255, 0.08);
	--divider: rgba(255, 255, 255, 0.05);
	--text: #e8edf5;
	--text-dim: rgba(232, 237, 245, 0.55);
	--text-faint: rgba(232, 237, 245, 0.3);
	--accent: #4da3ff;
	--gold: #f2b84b;
	--gold-text: #1a1206;
	--positive: #34d6b8;
	--negative: #ef5b5b;
	--row-height: 26px;
	--group-row-height: 23px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font: 13px/1.4 Helvetica, Arial, sans-serif;
}

/* ---- scrollbars ----
   Thin, custom-styled scrollbars on every scrolling region (rankings table, roster panels,
   draft-picks list, modal content) instead of the browser's default gray bar, which read as a
   leftover system-chrome element against the rest of the Stadium Lights palette. Firefox and
   Chromium need separate properties -- there's no single standard yet. */

.table-scroll,
.roster,
.opponent-roster,
.draft-picks-scroll,
.detail,
.modal-content {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.table-scroll::-webkit-scrollbar,
.roster::-webkit-scrollbar,
.opponent-roster::-webkit-scrollbar,
.draft-picks-scroll::-webkit-scrollbar,
.detail::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.table-scroll::-webkit-scrollbar-track,
.roster::-webkit-scrollbar-track,
.opponent-roster::-webkit-scrollbar-track,
.draft-picks-scroll::-webkit-scrollbar-track,
.detail::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
	background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb,
.roster::-webkit-scrollbar-thumb,
.opponent-roster::-webkit-scrollbar-thumb,
.draft-picks-scroll::-webkit-scrollbar-thumb,
.detail::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 4px;
}

.table-scroll::-webkit-scrollbar-thumb:hover,
.roster::-webkit-scrollbar-thumb:hover,
.opponent-roster::-webkit-scrollbar-thumb:hover,
.draft-picks-scroll::-webkit-scrollbar-thumb:hover,
.detail::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.4);
}

/* ---- tabs ---- */

.tabs {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	padding: 14px 20px 0;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	flex: none;
}

.tab {
	padding-bottom: 12px;
	color: var(--text-dim);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.tab:hover {
	color: var(--text);
}

.tab.active {
	color: var(--gold);
	font-weight: 700;
	border-bottom-color: var(--gold);
}

.account {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	padding: 6px 0;
}

.team-name {
	background: none;
	border: none;
	padding: 0;
	color: var(--text);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
}

.team-name:hover {
	color: var(--accent);
}

.btn-logout {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-dim);
	font-size: 11px;
	cursor: pointer;
	font: inherit;
}

.btn-logout:hover {
	color: var(--text);
}

/* ---- controls ---- */

.controls {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	background: var(--surface);
	flex: none;
	flex-wrap: wrap;
}

.controls .year {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--text-dim);
}

.controls select {
	background: var(--surface-raised);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 8px;
	font: inherit;
}

.controls .search {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--text-dim);
}

.controls .search input {
	background: var(--surface-raised);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 8px;
	font: inherit;
	width: 180px;
}

.controls .search input:focus {
	outline: none;
	border-color: var(--accent);
}

.current-pick {
	margin-left: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--gold);
	white-space: nowrap;
}

.current-pick-standalone {
	margin-left: auto;
}

.btn-reset {
	margin-left: 0;
	background: none;
	color: var(--text-dim);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	padding: 7px 12px;
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}

.btn-reset:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-draft-toggle {
	margin: 0;
	background: var(--gold);
	color: var(--gold-text);
	border: 1px solid var(--gold);
	border-radius: 4px;
	padding: 7px 14px;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.btn-draft-toggle:hover {
	background: #f5c56a;
	border-color: #f5c56a;
}

.btn-draft-toggle:disabled {
	background: var(--surface-raised);
	border-color: var(--border);
	color: var(--text-dim);
	cursor: default;
}

.btn-draft-pick {
	background: var(--gold);
	color: var(--gold-text);
	border: 1px solid var(--gold);
	border-radius: 4px;
	padding: 4px 9px;
	font: inherit;
	font-size: 9px;
	font-weight: 700;
	cursor: pointer;
}

.btn-draft-pick:hover {
	background: #f5c56a;
	border-color: #f5c56a;
}

.btn-draft-pick:disabled {
	cursor: not-allowed;
	background: var(--surface-raised);
	border-color: var(--border);
	color: var(--text-dim);
	opacity: 1;
}

.btn-draft-pick:disabled:hover {
	background: var(--surface-raised);
	border-color: var(--border);
	color: var(--text-dim);
}

td.draft-col,
th.draft-col {
	text-align: center;
}

/* Must out-specify "table.rankings thead th", which sets left alignment for the text columns --
   the same trap documented on ".numeric" above: a bare "th.draft-col" loses to it and leaves the
   Draft header misaligned over its centered button. */
table.rankings thead th.draft-col {
	text-align: center;
}

/* ---- band-card ----
   Shared wrapper for the draft order strip and best-available row: a small gold-on-steel label bar
   on top of a bordered container, so each reads as its own labeled section rather than a floating
   row of pills sitting directly on the page background. */

.band-card {
	flex: none;
	margin: 0 20px 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
}

.band-card-title {
	background: var(--band);
	padding: 6px 12px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ---- draft order strip ----
   Row of team ovals above the rankings table, shown only in draft mode (draft-strip.html). Teams
   are already rotated server-side (store.DraftOrderStrip) so the team on the clock is always
   first -- .on-clock is a positional class here, not a "this is my team" indicator. */

.draft-strip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	overflow-x: auto;
}

.draft-strip-team {
	flex: none;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	color: var(--text-dim);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.draft-strip-team.on-clock {
	background: var(--accent);
	border-color: var(--accent);
	color: #04101f;
}

.draft-strip-complete {
	justify-content: center;
}

.draft-complete-message {
	padding: 8px 22px;
	border-radius: 999px;
	background: var(--accent);
	color: #04101f;
	font-size: 14px;
	font-weight: 600;
}

/* ---- recommendations row ----
   Best-available undrafted player per position, shown above the rankings table in draft mode
   (recommendations.html). Styled like .draft-strip's ovals -- same row-of-pills language -- but
   each pill carries its own Draft button rather than being purely informational. */

.recommendations {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px;
}

.recommendation {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	padding: 8px 10px;
	border-radius: 5px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	font-size: 13px;
	white-space: nowrap;
}

.recommendation-pos {
	color: var(--text-faint);
	font-weight: 700;
	font-size: 13px;
}

.recommendation-player {
	color: var(--text);
}

/* Rows hidden by the search filter still exist for sorting/selection -- only display changes. */
tbody tr.search-hidden {
	display: none;
}

/* ---- rankings table ----
   One table rather than several: the column groups are visually separated by borders, so a
   single element keeps every row's cells aligned without any scroll synchronization. */

.table-scroll {
	flex: 1;
	overflow: auto;
	min-height: 0;
}

/* ---- All tab: rankings table + roster panel side by side ----
   .all-body takes the position tabs' .table-scroll's place as the flex-1 row between the controls
   and the detail panel, splitting into the rankings table (most of the width) and a fixed-width
   roster panel alongside it. */

.all-body {
	flex: 1;
	display: flex;
	gap: 16px;
	min-height: 0;
	overflow: hidden;
	padding: 0 20px 20px;
}

.all-body .table-scroll {
	flex: 1.7;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 6px;
}

.roster {
	flex: none;
	width: 230px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: auto;
}

.roster-card {
	flex: none;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 10px;
}

.roster-title {
	margin: 0 0 6px;
	padding: 4px 6px;
	font-size: 9px;
	font-weight: 700;
	color: var(--gold);
	background: var(--band);
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.roster-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.roster-table td {
	padding: 4px 0;
	border-bottom: 1px solid var(--divider);
	font-size: 13px;
}

.roster-table th {
	padding: 0 0 4px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	font-size: 9px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.roster-slot {
	width: 40px;
	color: var(--text-dim);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.roster-player.empty {
	color: var(--text-faint);
}

.roster-bye {
	width: 24px;
	text-align: right;
	color: var(--text-dim);
	font-size: 13px;
}

/* ---- All tab: opponent roster navigator (draft mode only) ----
   Same static empty-slot table as My Roster above it, just under a different team name -- see
   opponent-roster.js. Its own card (like My Roster), not nested inside it, so both scroll and size
   independently in the .roster column. */

.opponent-roster {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.opponent-roster-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 8px;
}

.opponent-roster-header .roster-title {
	margin: 0;
	flex: 1;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.btn-opponent-nav {
	flex: none;
	background: none;
	color: var(--accent);
	border: none;
	width: 22px;
	height: 22px;
	line-height: 1;
	font-size: 14px;
	cursor: pointer;
}

.btn-opponent-nav:hover {
	color: #7cbaff;
}

.opponent-team-select {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	background: var(--surface-raised);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 8px;
	font: inherit;
	font-size: 12px;
}

/* ---- All tab: draft picks list (draft mode only) ----
   Sits alongside the roster panel, same fixed width/border treatment. Picks render oldest-first
   top-to-bottom so the most recent pick is always the last row -- draft-picks-scroll.js scrolls this
   container to the bottom on load so a freshly recorded pick (which reloads the page) is visible
   without the user scrolling manually. */

.draft-picks {
	flex: none;
	width: 220px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 10px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 6px;
}

.draft-picks-scroll {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.draft-pick-row {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 4px 0;
	border-bottom: 1px solid var(--divider);
}

.draft-pick-oval {
	flex: 1;
	min-width: 0;
	color: var(--text-dim);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.draft-pick-row:last-child .draft-pick-oval {
	color: var(--text);
	font-weight: 600;
}

.btn-draft-undo {
	flex: none;
	background: none;
	color: var(--negative);
	border: 1px solid var(--negative);
	border-radius: 3px;
	padding: 2px 6px;
	font: inherit;
	font-size: 9px;
	font-weight: 700;
	cursor: pointer;
}

.btn-draft-undo:hover {
	background: var(--negative);
	color: #fff;
}

.btn-draft-undo:disabled {
	background: none;
	border-color: var(--border);
	color: var(--text-dim);
	cursor: default;
}

table.rankings {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

table.rankings thead th {
	position: sticky;
	top: 0;
	background: var(--surface-raised);
	border-bottom: 1px solid var(--border);
	font-size: 10px;
	font-weight: 700;
	color: var(--gold);
	text-align: left;
	padding: 6px 9px;
	white-space: nowrap;
	z-index: 2;
}

/* The group-label row sits above the column row, sticky at the very top since it renders first.
   Its height is fixed via --group-row-height so the column row below, also sticky, can pin its
   own top to that exact value instead of a number that has to be eyeballed against rendering. */
table.rankings thead tr.group-row th {
	top: 0;
	z-index: 3;
	height: var(--group-row-height);
	background: var(--band);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 9px;
	cursor: default;
}

table.rankings thead tr.group-row th:hover {
	color: var(--gold);
}

table.rankings thead tr.group-row + tr th {
	top: var(--group-row-height);
}

table.rankings tbody td {
	padding: 3px 9px;
	border-bottom: 1px solid var(--divider);
	white-space: nowrap;
	height: var(--row-height);
}

/* The vertical rule that separates the column groups */
.group-start {
	border-left: 1px solid var(--border) !important;
}

.numeric {
	text-align: right;
}

/* Must out-specify "table.rankings thead th", which sets left alignment for the text columns --
   a bare "th.numeric" loses to it and leaves every numeric header misaligned over its data. */
table.rankings thead th.numeric {
	text-align: right;
}

/* ---- sorting ---- */

table.rankings thead th {
	cursor: pointer;
	user-select: none;
}

table.rankings thead th:hover {
	color: var(--text);
}

/* The indicator is always in the DOM and only becomes visible on the active column, so adding it
   never changes a header's width and the columns do not shift as the sort moves between them. */
th .sort-arrow {
	display: inline-block;
	width: 8px;
	margin-left: 3px;
	opacity: 0;
}

th.sort-active {
	color: var(--accent);
}

th.sort-active .sort-arrow {
	opacity: 1;
}

.rank {
	color: var(--text-dim);
	font-weight: 600;
}

.player {
	font-weight: 600;
	color: var(--text);
}

/* Q/O badge from ESPN's injury Status ("Questionable"/"Out"/"Injured Reserve" -- see
   ConsensusRow.StatusBadge). Inline after the player name rather than a separate column since it
   applies to a small minority of rows. Q and O share the negative-red token; sleeper/bust below get
   their own distinct colors so all three read apart from each other at a glance. */
.status-badge {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 4px;
	border-radius: 2px;
	font-size: 8px;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
	cursor: help;
}

.status-badge.status-q,
.status-badge.status-o {
	background: var(--negative);
	color: #fff;
}

/* Sleeper/bust badges, from sleeper_bust research calls -- a sleeper-and-bust row (a "split
   opinion", per the CSV) shows both letters side by side rather than a gradient. */
.status-badge.badge-sleeper {
	background: var(--positive);
	color: #04231d;
}

.status-badge.badge-bust {
	background: var(--gold);
	color: var(--gold-text);
}

tbody tr:hover {
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
}

tbody tr.selected {
	background: rgba(77, 163, 255, 0.16);
	box-shadow: inset 2px 0 0 var(--accent);
}

/* Zebra striping. nth-child rather than an odd/even data attribute since row order is already
   client-side sortable/filterable -- CSS position always matches what's visible, no JS re-tagging
   needed after a sort or search. Selected/hover still win since they're declared after this. */
tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.03);
}

/* ---- drag-and-drop reordering ---- */
/* See drag-rank.js. The handle column is a fixed narrow width, unsortable (no data-sort/th click
   handler applies to .drag-col), and separate from the row's own click-to-select -- only the handle
   cell has draggable="true", not the row. */

table.rankings thead th.drag-col {
	width: 20px;
	cursor: default;
}

table.rankings thead th.drag-col:hover {
	color: var(--text-dim);
}

td.drag-handle {
	width: 20px;
	text-align: center;
	color: var(--text-faint);
	cursor: grab;
	user-select: none;
}

td.drag-handle:active {
	cursor: grabbing;
}

tbody tr.dragging {
	opacity: 0.4;
}

/* The drop indicator is a border on the row the dragged row would land next to, above or below
   depending on which half of the row the pointer is over -- drawn as box-shadow rather than
   border so it doesn't shift the row's height or the columns beneath it. */
tbody tr.drop-above {
	box-shadow: inset 0 2px 0 var(--accent);
}

tbody tr.drop-below {
	box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- detail panel ----
   Boxed like .band-card (the draft order strip/best-available row): a bordered, rounded-corner card
   with a gold-on-steel title bar (.detail-header, matching .band-card-title) on top, so the player
   stats panel reads as the same kind of labeled section. */

.detail {
	flex: none;
	height: 320px;
	overflow: auto;
	background: var(--surface);
	margin: 0 20px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
}

.detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--band);
	padding: 8px 20px;
	border-radius: 6px 6px 0 0;
}

.detail-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--gold);
}

.detail-subtitle {
	color: var(--gold);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-left: 8px;
}

/* The two stat tables stack on the left; commentary sits to the right in its own column. */
.detail-body {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 14px 20px;
}

.detail-tables {
	flex: 1;
	min-width: 0;
}

.detail-table-title {
	margin: 14px 0 6px;
	font-size: 9px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.detail-table-title:first-child {
	margin-top: 0;
}

.detail-table-title--predicted {
	color: var(--gold);
	background: var(--band);
	padding: 4px 6px;
	border-radius: 4px;
}

table.history {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

table.history th {
	text-align: left;
	font-size: 9px;
	font-weight: 700;
	color: var(--gold);
	padding: 4px 16px 4px 0;
	border-bottom: 1px solid var(--border);
}

table.history th.numeric {
	text-align: right;
}

table.history td {
	padding: 3px 16px 3px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.empty {
	color: var(--text-dim);
	font-size: 12px;
}

/* ---- Fantasy Pros rank popup ---- */

.rank-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--accent);
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

.rank-popover {
	position: absolute;
	z-index: 10;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.rank-popover dl {
	display: grid;
	grid-template-columns: auto auto;
	gap: 2px 14px;
	margin: 0;
	font-size: 12px;
}

.rank-popover dt {
	color: var(--text-dim);
}

.rank-popover dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.team-name-popover {
	position: absolute;
	z-index: 10;
	display: flex;
	gap: 6px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.team-name-popover input {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 6px;
	color: var(--text);
	font: inherit;
	width: 180px;
}

.team-name-popover button {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 8px;
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.team-name-popover button:hover {
	border-color: var(--accent);
}

/* ---- team stats modal ----
   Its own layout, not .detail-body/.detail-tables (shared with the player detail panel, which
   always splits stats/commentary evenly): the O-line block spans the full width, with the
   predicted/actual stat tables and the depth chart as a second row below it, side by side. */

.team-detail-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.team-oline .detail-table-title {
	color: var(--gold);
	font-size: 10px;
	margin-top: 6px;
}

.team-detail-row {
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.team-detail-row .detail-tables {
	flex: 0 0 auto;
	min-width: 0;
}

.team-depth-chart {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-left: 24px;
	border-left: 1px solid var(--border);
}

.depth-chart-link {
	color: var(--accent);
	text-decoration: underline;
}

.team-schedule {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-left: 24px;
	border-left: 1px solid var(--border);
}

td.schedule-opponent {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

td.schedule-bye {
	color: var(--text-dim);
}

td.team {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.65);
}

/* Author display: always beats the UA's built-in [hidden] rule, so this override is required for
   overlay.hidden = true (team-modal.js) to actually hide it -- same fix already applied to
   .commentary-link[hidden] below. */
.modal-overlay[hidden] {
	display: none;
}

.modal-content {
	position: relative;
	width: min(760px, 90vw);
	max-height: 80vh;
	overflow: auto;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* The team stats modal has three side-by-side blocks (predicted/actual, depth chart, schedule) that
   need more room than the 760px shared modal width gives before .team-detail-row wraps and forces
   a scrollbar. */
#teamModalContent {
	width: min(980px, 90vw);
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modal-header .detail-title {
	font-size: 16px;
}

.modal-close {
	background: none;
	border: none;
	color: var(--text-dim);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.modal-close:hover {
	color: var(--text);
}

/* ---- draft setup modal ---- */

#draftTeamList {
	list-style: none;
	margin: 16px 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.draft-team-row {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 8px;
}

.draft-team-row .drag-handle {
	cursor: grab;
	color: var(--text-dim);
	user-select: none;
}

.draft-team-row:active .drag-handle {
	cursor: grabbing;
}

.draft-team-row.dragging {
	opacity: 0.4;
}

.draft-team-row.drop-above {
	box-shadow: inset 0 2px 0 var(--accent);
}

.draft-team-row.drop-below {
	box-shadow: inset 0 -2px 0 var(--accent);
}

.draft-team-row input {
	flex: 1;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 5px 8px;
	color: var(--text);
	font: inherit;
}

.draft-team-row input:focus {
	outline: none;
	border-color: var(--accent);
}

.team-simulate-label {
	flex: none;
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--text-dim);
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

.team-simulate-label input[type="checkbox"] {
	flex: none;
	width: auto;
	cursor: pointer;
}

.btn-remove-team {
	flex: none;
	background: none;
	border: none;
	color: var(--text-dim);
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
}

.btn-remove-team:hover {
	color: var(--negative);
}

.btn-add-team {
	background: none;
	border: 1px dashed var(--border);
	border-radius: 4px;
	color: var(--text-dim);
	padding: 6px 10px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	width: 100%;
}

.btn-add-team:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.draft-error {
	color: var(--negative);
	font-size: 12px;
	margin: 10px 0 0;
}

.draft-error[hidden] {
	display: none;
}

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

/* ---- commentary ---- */

.commentary {
	flex: 1;
	min-width: 0;
	border-left: 1px solid var(--border);
	padding-left: 24px;
}

.commentary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	padding: 4px 6px;
	background: var(--band);
	border-radius: 4px;
}

.commentary-source {
	font-size: 11px;
	font-weight: 600;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.commentary-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--text-dim);
	white-space: nowrap;
}

.commentary-nav button {
	background: none;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text);
	width: 20px;
	height: 20px;
	line-height: 1;
	cursor: pointer;
}

.commentary-nav button:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.commentary-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text);
}

.commentary-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--accent);
}

.commentary-link[hidden] {
	display: none;
}