/*
 * Team stats (round 7d, inc/stats-pages.php): the Teams table of the Stats pages (/cfb/stats/, /sbc/stats/) and the
 * Team stats box of a school. Loaded only on those pages, after main.css; colours and type come from its tokens.
 */

/* ---------- The Stats page ---------- */

.syn-statspage {
	padding-bottom: 32px;
}

.syn-statsform {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin: 4px 0 12px;
}

.syn-statsform__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.syn-statsform__label {
	color: var(--syn-muted);
	font: 600 12px/1.2 var(--syn-body);
}

.syn-statsform select {
	max-width: 100%;
	min-height: 38px;
	padding: 6px 30px 6px 10px;
	color: var(--syn-ink);
	font: 500 14px/1.2 var(--syn-body);
	background-color: var(--syn-surface);
	border: 1px solid var(--syn-line-2);
	border-radius: var(--syn-radius);
}

.syn-statsform__go {
	min-height: 38px;
}

.syn-statspage__source,
.syn-statspage__own {
	margin: 0 0 12px;
	color: var(--syn-muted);
	font-size: 13px;
	line-height: 1.4;
}

/* ---------- The Teams table ---------- */

/* The table scrolls sideways in its own box; the page never does. */
.syn-statsbox {
	max-width: 100%;
	overflow-x: auto;
	background: var(--syn-surface);
	border: 1px solid var(--syn-line);
	border-radius: var(--syn-radius);
	-webkit-overflow-scrolling: touch;
}

.syn-statsbox:focus-visible {
	outline: 2px solid var(--syn-accent);
	outline-offset: 2px;
}

.syn-stats {
	width: 100%;
	min-width: 640px;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	border-collapse: separate;
	border-spacing: 0;
}

.syn-stats th,
.syn-stats td {
	padding: 8px 10px;
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid var(--syn-line);
}

.syn-stats thead th {
	color: var(--syn-ink);
	font: 700 13px/1.2 var(--syn-body);
	vertical-align: bottom;
	background: var(--syn-surface);
	border-bottom: 2px solid var(--syn-line-2);
}

.syn-stats abbr[title] {
	text-decoration: none;
	cursor: help;
}

.syn-stats tbody tr:last-child th,
.syn-stats tbody tr:last-child td {
	border-bottom: 0;
}

.syn-stats .syn-stats__rank {
	width: 1%;
	color: var(--syn-muted);
	text-align: left;
}

/* The school column is held while the figures scroll under it. */
.syn-stats .syn-stats__school {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 170px;
	font-weight: 600;
	text-align: left;
	white-space: normal;
	background: var(--syn-surface);
	box-shadow: 1px 0 0 var(--syn-line);
}

.syn-stats tbody .syn-stats__school a {
	color: var(--syn-ink);
	text-decoration: none;
}

.syn-stats tbody .syn-stats__school a:hover,
.syn-stats tbody .syn-stats__school a:focus-visible {
	text-decoration: underline;
}

.syn-stats .is-key {
	font-weight: 700;
	background: color-mix(in srgb, var(--syn-accent) 10%, var(--syn-surface));
}

.syn-stats thead .is-key {
	border-bottom-color: var(--syn-accent);
}

.syn-stats__conf {
	color: var(--syn-ink-2);
}

/* The column heads as buttons (assets/js/stats.js). */
.syn-stats__sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-align: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.syn-stats__sort::after {
	content: "";
	width: 0;
	height: 0;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	opacity: 0.3;
	border-top: 5px solid currentColor;
}

[aria-sort="ascending"] > .syn-stats__sort::after {
	opacity: 1;
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

[aria-sort="descending"] > .syn-stats__sort::after {
	opacity: 1;
}

.syn-stats__sort:focus-visible {
	outline: 2px solid var(--syn-accent);
	outline-offset: 2px;
}

/* A head that will sort keeps the arrow's room (its 8px and the 4px gap) before the script has made it a button, so the
   heads do not widen, and the page does not shift, when it runs. */
.syn-stats th[data-sort]:not(:has(> .syn-stats__sort))::after,
.syn-table--stats th[data-sort]:not(:has(> .syn-stats__sort))::after {
	content: "";
	display: inline-block;
	width: 8px;
	margin-left: 4px;
}

@media (max-width: 600px) {
	.syn-stats {
		font-size: 13px;
	}

	.syn-stats th,
	.syn-stats td {
		padding: 7px 8px;
	}

	.syn-stats .syn-stats__school {
		min-width: 140px;
	}
}

/* ---------- The Team stats box ---------- */

.syn-teamstats__list {
	margin: 0;
}

.syn-teamstats__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--syn-line);
}

.syn-teamstats__line dt {
	color: var(--syn-ink-2);
	font-size: 14px;
}

.syn-teamstats__line dd {
	margin: 0;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.syn-teamstats__value {
	color: var(--syn-ink);
	font-weight: 700;
}

.syn-teamstats__place {
	color: var(--syn-muted);
	font-size: 12.5px;
}

.syn-teamstats__head {
	margin: 14px 0 6px;
	color: var(--syn-ink);
	font: 700 14px/1.2 var(--syn-body);
}

.syn-teamstats__games {
	margin: 0;
	padding: 0;
	list-style: none;
}

.syn-teamstats__game {
	padding: 4px 0;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.syn-teamstats__score {
	display: inline-block;
	min-width: 72px;
	font-weight: 700;
}

.syn-teamstats__game--w .syn-teamstats__score {
	color: var(--syn-ink);
}

.syn-teamstats__game--l .syn-teamstats__score,
.syn-teamstats__game--t .syn-teamstats__score {
	color: var(--syn-ink-2);
}

.syn-teamstats__game a {
	color: inherit;
	text-decoration: none;
}

.syn-teamstats__game a:hover .syn-teamstats__opp,
.syn-teamstats__game a:focus-visible .syn-teamstats__opp {
	text-decoration: underline;
}

.syn-teamstats__note {
	margin: 10px 0 0;
	color: var(--syn-muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.syn-teamstats__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* ---------- Player tables (round 7g): a school's stats page, and the game page's box score (lane box) ---------- */

/* A table of players' numbers. It sits in .syn-statsbox, which scrolls sideways; the name column is held. */
.syn-table--stats {
	width: 100%;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	border-collapse: separate;
	border-spacing: 0;
}

.syn-table--stats th,
.syn-table--stats td {
	padding: 7px 9px;
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid var(--syn-line);
}

.syn-table--stats thead th {
	color: var(--syn-ink);
	font: 700 13px/1.2 var(--syn-body);
	vertical-align: bottom;
	background: var(--syn-surface);
	border-bottom: 2px solid var(--syn-line-2);
}

.syn-table--stats abbr[title] {
	text-decoration: none;
	cursor: help;
}

.syn-table--stats .is-key {
	font-weight: 700;
}

.syn-table--stats thead .is-key {
	border-bottom-color: var(--syn-accent);
}

.syn-table--stats .syn-table__name {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 160px;
	text-align: left;
	white-space: normal;
	background: var(--syn-surface);
	box-shadow: 1px 0 0 var(--syn-line);
}

.syn-table--stats tbody .syn-table__name {
	font-weight: 600;
}

.syn-table__player {
	color: var(--syn-ink);
	font: inherit;
	text-align: left;
}

/* The player's name as a link (no script) or a button (assets/js/stats-log.js). */
a.syn-table__player,
button.syn-table__player {
	padding: 0;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}

a.syn-table__player:hover,
a.syn-table__player:focus-visible,
button.syn-table__player:hover,
button.syn-table__player:focus-visible {
	text-decoration: underline;
}

button.syn-table__player:focus-visible {
	outline: 2px solid var(--syn-accent);
	outline-offset: 2px;
}

button.syn-table__player[aria-expanded="true"] {
	text-decoration: underline;
}

.syn-table__no {
	margin-left: 4px;
	color: var(--syn-muted);
	font-size: 12.5px;
	font-weight: 400;
}

/* The Total row: the team's own figure where the box scores have one. */
.syn-table--stats tfoot th,
.syn-table--stats tfoot td {
	font-weight: 700;
	border-top: 2px solid var(--syn-line-2);
	border-bottom: 0;
}

.syn-table--stats tbody tr:last-child th,
.syn-table--stats tbody tr:last-child td {
	border-bottom: 0;
}

/* The game log, opened under a player's row. */
.syn-table__logrow > td {
	padding: 10px;
	text-align: left;
	white-space: normal;
	background: var(--syn-bg);
}

.syn-table__logrow .syn-statsbox {
	position: sticky;
	left: 10px;
	max-width: calc(100vw - 64px);
}

.syn-table__logrow .syn-empty {
	margin: 0;
}

.syn-gamelog__where {
	display: inline-block;
	min-width: 18px;
	color: var(--syn-muted);
	font-weight: 400;
}

.syn-table--log .syn-team {
	gap: 6px;
}

.syn-table--log .syn-table__date {
	text-align: left;
}

.syn-table--log thead .syn-table__groupcol {
	text-align: center;
	border-bottom-width: 1px;
}

.syn-gamelog__result a {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.syn-gamelog__result a:hover,
.syn-gamelog__result a:focus-visible {
	text-decoration: underline;
}

/* The Team tab: the school and its opponents. */
.syn-table--team {
	min-width: 0;
}

.syn-table--team td {
	width: 25%;
}

.syn-table--team .syn-table__grouphead th {
	position: static;
	padding-top: 14px;
	color: var(--syn-ink);
	font: 700 14px/1.2 var(--syn-body);
	text-align: left;
	background: none;
	box-shadow: none;
}

.syn-table--team tbody .syn-table__name {
	color: var(--syn-ink-2);
	font-weight: 400;
}

.syn-table--team tbody tr:last-child th,
.syn-table--team tbody tr:last-child td {
	border-bottom: 1px solid var(--syn-line);
}

@media (max-width: 600px) {
	.syn-table--stats {
		font-size: 13px;
	}

	.syn-table--stats th,
	.syn-table--stats td {
		padding: 7px 7px;
	}

	.syn-table--stats .syn-table__name {
		min-width: 130px;
	}
}

/* ---------- A school's stats page (round 7g): /troy/football/stats/ ---------- */

.syn-schoolstats__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0 0 12px;
}

/* The tables with the side column beside them; one column on narrower screens, the side column under. */
.syn-schoolstats__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px var(--syn-gap);
	align-items: start;
}

@media (min-width: 1000px) {
	.syn-schoolstats__grid {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.syn-schoolstats__main,
.syn-schoolstats__rail {
	min-width: 0;
}

.syn-schoolstats__rail > * + * {
	margin-top: 20px;
}

.syn-schoolstats__log {
	margin-bottom: 24px;
}

/* A panel's own heading says what its tab says: with the tabs on, it stays for screen readers. */
.is-tabbed .syn-schoolstats__panelhead,
.syn-js-tabs [data-syn-tabs]:not(.is-tabbed) .syn-schoolstats__panelhead {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.syn-schoolstats__panelhead {
	margin: 0 0 12px;
	color: var(--syn-ink);
	font: 700 20px/1.1 var(--syn-display);
	text-transform: uppercase;
}

/* One table a group, with "Show all" under a long table. */
.syn-statsgroup {
	margin: 0 0 22px;
}

.syn-statsgroup__title {
	margin: 0 0 8px;
	color: var(--syn-ink);
	font: 700 16px/1.1 var(--syn-display);
	text-transform: uppercase;
}

.syn-statsgroup__more {
	margin-top: 8px;
}

.syn-statsgroup__more > summary {
	display: inline-block;
	color: var(--syn-accent-text);
	font: 600 14px/1.3 var(--syn-body);
	cursor: pointer;
	list-style: none;
}

.syn-statsgroup__more > summary::-webkit-details-marker {
	display: none;
}

.syn-statsgroup__more > summary:focus-visible {
	outline: 2px solid var(--syn-accent);
	outline-offset: 2px;
}

.syn-statsgroup__more .syn-statsgroup__fewer,
.syn-statsgroup__more[open] .syn-statsgroup__all {
	display: none;
}

.syn-statsgroup__more[open] .syn-statsgroup__fewer {
	display: inline;
}

/*
 * A long table shows its first 15 players until "Show all" is open. Only player rows count (an open game log row
 * does not), only the group's own table is reached (not a log's table inside it), and a hidden player's log hides too.
 */
.syn-statsgroup.is-long:has(> .syn-statsgroup__more:not([open])) > .syn-statsbox > table > tbody > tr.syn-table__row:nth-child(n+16 of .syn-table__row),
.syn-statsgroup.is-long:has(> .syn-statsgroup__more:not([open])) > .syn-statsbox > table > tbody > tr.syn-table__row:nth-child(n+16 of .syn-table__row) + .syn-table__logrow {
	display: none;
}

/* The Team leaders box (and, compact, in the Team stats box). */
.syn-leaders {
	margin: 0;
}

.syn-leaders__line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--syn-line);
}

.syn-leaders__line:last-child {
	border-bottom: 0;
}

.syn-leaders__kind {
	grid-column: 1 / -1;
	color: var(--syn-muted);
	font: 600 12px/1.3 var(--syn-body);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.syn-leaders__who {
	margin: 2px 0 0;
	color: var(--syn-ink);
	font-size: 14px;
	font-weight: 600;
}

.syn-leaders__no {
	margin-left: 4px;
	color: var(--syn-muted);
	font-size: 12.5px;
	font-weight: 400;
}

.syn-leaders__value {
	align-self: end;
	margin: 0;
	color: var(--syn-ink);
	font: 700 15px/1.3 var(--syn-body);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.syn-leaders--compact .syn-leaders__line {
	padding: 6px 0;
}

/* ---------- Leaders (round 7h): the Players view, the full lists, a conference's leaders ---------- */

/* The switch Players | Teams, and a conference's row of sports. */
.syn-statsnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 14px;
}

.syn-statsnav__link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 14px;
	color: var(--syn-ink);
	font: 600 14px/1.2 var(--syn-body);
	text-decoration: none;
	background: var(--syn-surface);
	border: 1px solid var(--syn-line-2);
	border-radius: 999px;
}

.syn-statsnav__link:hover {
	border-color: var(--syn-accent);
}

.syn-statsnav__link[aria-current="page"] {
	color: var(--syn-surface);
	background: var(--syn-ink);
	border-color: var(--syn-ink);
}

.syn-statsnav__link:focus-visible {
	outline: 2px solid var(--syn-accent);
	outline-offset: 2px;
}

.syn-leadsection {
	margin-top: 8px;
}

/* One card a category: one a row on a phone, two from 640 px, three from 960 px. */
.syn-leadcards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 8px 0 20px;
}

@media (min-width: 640px) {
	.syn-leadcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.syn-leadcards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.syn-leadcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 14px 16px 12px;
	background: var(--syn-surface);
	border: 1px solid var(--syn-line);
	border-radius: var(--syn-radius);
}

.syn-leadcard__title {
	margin: 0 0 6px;
	color: var(--syn-ink);
	font: 700 16px/1.2 var(--syn-body);
}

.syn-leadcard__list {
	flex: 1;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.syn-leadcard__row {
	display: grid;
	grid-template-columns: 2.4em minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--syn-line);
}

.syn-leadcard__row:last-child {
	border-bottom: 0;
}

.syn-leadcard__rank {
	color: var(--syn-muted);
	font: 600 13px/1.2 var(--syn-body);
	font-variant-numeric: tabular-nums;
}

.syn-leadcard__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 6px;
	min-width: 0;
	color: var(--syn-ink);
	font-size: 14px;
}

.syn-leadcard__name {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.syn-leadcard__no,
.syn-leadlist__no {
	color: var(--syn-muted);
	font-size: 12.5px;
}

.syn-leadcard__team {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--syn-ink-2);
	font-size: 12.5px;
	font-weight: 600;
}

.syn-leadcard__team abbr[title],
.syn-stats__team abbr[title] {
	text-decoration: none;
}

.syn-leadcard__value {
	color: var(--syn-ink);
	font: 700 15px/1.2 var(--syn-body);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.syn-leadcard__more {
	align-self: flex-start;
}

/* A full list. */
.syn-leadlist__name {
	font-weight: 600;
}

.syn-leadlist__no {
	margin-left: 4px;
}

.syn-stats__team {
	white-space: nowrap;
}

.syn-statspager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 12px 0 8px;
	font: 600 14px/1.3 var(--syn-body);
}

.syn-statspager__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--syn-accent-text);
}

.syn-statspager__at {
	color: var(--syn-muted);
	font-weight: 500;
}

.syn-statspager__all {
	margin-left: auto;
}