/* ============================================================================
 * BACKEND CONTRACT — RESTYLE ONLY AGAINST THE LIVE MARKUP
 * ============================================================================
 * These rules target markup this repo does not own. pinball-manager returns
 * rendered HTML from /api/pinball/results/{week,season}/.../asHtml and the
 * league pages inject it directly into <div class="scores">. Change them
 * deliberately, with the backend running and the tables in front of you, never
 * as a side effect of a sitewide pass: the markup cannot be seen from here.
 *
 * Verified against the live backend on 2026-09-07, and again for the restyle
 * at the foot of this file on 2026-09-13:
 *   week results  -> <table class="results table table-sm table-striped">
 *   season table  -> <table class="standings table table-sm table-striped">
 *
 * Column counts are DYNAMIC. A week's results table has one column per
 * machine played (9 columns when observed, 4 machines); the standings table
 * has one per week in the season (10 columns, 6 weeks). The nth-child rules
 * below therefore encode positions that shift with league configuration.
 *
 * Mid-scoring, before a week's scoringComplete, the week comes differently
 * (observed on a partly scored week, 2026-09-13): one small table per machine,
 * each in a fixed col-3, with no .table-responsive around it —
 *   <div class="row"><div class="col-3">
 *     <table class="results-progress table table-sm table-striped">
 * three columns each, # / player / score, headed "#" and the machine's name
 * across two. The .results-progress rules below are live, not dead. The
 * league page wraps each of these tables in a .table-responsive itself
 * (cardProgressTables, layouts/league.njk), so they take the card below.
 *
 * Changing pinball-manager's column order silently breaks the styling here.
 * ==========================================================================*/

/* Results in Progress Tables */
.table.results-progress {
	color: var(--ccpl-text);
}

.table.results-progress > tbody > tr > td,
.table.results-progress > tbody > tr > th,
.table.results-progress > tfoot > tr > td,
.table.results-progress > tfoot > tr > th,
.table.results-progress > thead > tr > td,
.table.results-progress > thead > tr > th,
.table.results-progress {
	border: 1px solid var(--ccpl-rule);
}

.table.results-progress th:nth-child(1),
.table.results-progress td:nth-child(1),
.table.results-progress th:nth-child(3),
.table.results-progress td:nth-child(3),
.table.results-progress th:nth-child(4),
.table.results-progress td:nth-child(4),
.table.results-progress th:nth-child(5),
.table.results-progress td:nth-child(5) {
	text-align: right;
}

.table.results-progress th:nth-child(6),
.table.results-progress td:nth-child(6) {
	text-align: center;
}

.table.results-progress th:nth-child(1),
.table.results-progress th:nth-child(2),
.table.results-progress th:nth-child(3),
.table.results-progress th:nth-child(4),
.table.results-progress th:nth-child(5),
.table.results-progress th:nth-child(6) {
	border-bottom: 3px solid var(--ccpl-rule);
}

.table.results-progress th:nth-child(2),
.table.results-progress td:nth-child(2) {
	text-align: left;
	padding-right: 10px;
}

/* The col-3 is a quarter of the width at every size, so on a phone the four
   tables overlapped and the page scrolled sideways. Four fit beside the
   calendar only from about 1280px (a nine-digit score is the widest cell),
   so two to a row below that, and one below sm. The col-3s are the only
   ones in .scores: the week's header row uses col-md-4 and col-md-8. */
@media (max-width: 1279.98px) {
	.scores .row > .col-3 {
		width: 50%;
		margin-bottom: 12px;
	}
}

@media (max-width: 575.98px) {
	.scores .row > .col-3 {
		width: 100%;
	}
}

/* Results Tables */
.table.results,
.table.standings,
.table-striped > tbody > tr:nth-of-type(2n+1) > * {
	color: var(--ccpl-text);
}

.table.results > tbody > tr > td,
.table.results > tbody > tr > th,
.table.results > tfoot > tr > td,
.table.results > tfoot > tr > th,
.table.results > thead > tr > td,
.table.results > thead > tr > th,
.table.standings > tbody > tr > td,
.table.standings > tbody > tr > th,
.table.standings > tfoot > tr > td,
.table.standings > tfoot > tr > th,
.table.standings > thead > tr > td,
.table.standings > thead > tr > th,
.table.results, .table.standings {
	border: 1px solid var(--ccpl-rule);
}

table th, .table th {
	text-align: center;
}

.table.results th:nth-child(1),
.table.results th:nth-child(2),
.table.results th:nth-child(3),
.table.results th:nth-child(4),
.table.results th:nth-child(5),
.table.results th:nth-child(6),
.table.results th:nth-child(7),
.table.results th:nth-child(8),
.table.results th:nth-child(9),
.table.standings th:nth-child(1),
.table.standings th:nth-child(2),
.table.standings th:nth-child(3),
.table.standings th:nth-child(4),
.table.standings th:nth-child(5),
.table.standings th:nth-child(6),
.table.standings th:nth-child(7),
.table.standings th:nth-child(8),
.table.standings th:nth-child(9),
.table.standings th:nth-child(10) {
	border-bottom: 3px solid var(--ccpl-rule);
}

.table.results th:nth-child(3),
.table.results th:nth-child(4),
.table.results th:nth-child(5),
.table.results th:nth-child(6),
.table.results th:nth-child(8),
.table.results td:nth-child(12),
.table.standings th:nth-child(3),
.table.standings th:nth-child(4),
.table.standings td:nth-child(3),
.table.standings td:nth-child(4) {
	border-right: 3px solid var(--ccpl-rule);
}

.table.results th:nth-child(7),
.table.results td:nth-child(11),
.table.standings th:nth-child(2),
.table.standings th:nth-child(5),
.table.standings th:nth-child(6),
.table.standings th:nth-child(7),
.table.standings th:nth-child(8),
.table.standings th:nth-child(9),
.table.standings th:nth-child(10),
.table.standings th:nth-child(11),
.table.standings th:nth-child(12),
.table.standings td:nth-child(2),
.table.standings td:nth-child(5),
.table.standings td:nth-child(6),
.table.standings td:nth-child(7),
.table.standings td:nth-child(8),
.table.standings td:nth-child(9),
.table.standings td:nth-child(10),
.table.standings td:nth-child(11),
.table.standings td:nth-child(12) {
	border-right: 1px solid var(--ccpl-rule);
}

.table.results td:nth-child(4),
.table.results td:nth-child(6),
.table.results td:nth-child(8),
.table.results td:nth-child(10) {
	text-align: right;
	border-right: 3px solid var(--ccpl-rule);
}

.table.results th:nth-child(3),
.table.results th:nth-child(4),
.table.results th:nth-child(5),
.table.results th:nth-child(6) {
	border-left: 3px solid var(--ccpl-rule);
	border-right: 3px solid var(--ccpl-rule);
}

.table.results th:nth-child(1),
.table.results td:nth-child(1),
.table.standings th:nth-child(1),
.table.standings td:nth-child(1) {
	text-align: right;
	padding-right: 10px;
	border-right: 1px solid var(--ccpl-rule);
}

.table.results td:nth-child(3),
.table.results td:nth-child(5),
.table.results td:nth-child(7),
.table.results td:nth-child(9),
.table.results td:nth-child(11),
.table.results td:nth-child(12),
.table.results td:nth-child(13),
.table.standings td:nth-child(2),
.table.standings td:nth-child(4),
.table.standings td:nth-child(5),
.table.standings td:nth-child(6),
.table.standings td:nth-child(7),
.table.standings td:nth-child(8),
.table.standings td:nth-child(9),
.table.standings td:nth-child(10) {
	text-align: center;
}

.table.results td:nth-child(3),
.table.results td:nth-child(5),
.table.results td:nth-child(7),
.table.results td:nth-child(9) {
	border-left: 3px solid var(--ccpl-rule);
	border-right: 1px solid var(--ccpl-rule);
}

.table.results td:nth-child(2),
.table.results th:nth-child(2),
.table.standings th:nth-child(3),
.table.standings td:nth-child(3) {
	text-align: left;
	padding-left: 10px;
}

/* Previous / next week buttons, beside the week and season headings:
 *   <a class="btn btn-circle btn-circle-left" onclick="getWeek(611, loadResults)" title="Previous Week">
 *     <i class="fa fa-angle-double-left text-white"></i></a>
 * (btn-circle-right / fa-angle-double-right for next). The arrow is a
 * FontAwesome icon, and FontAwesome is gone from this repo, so the <i> renders
 * nothing and the button was an invisible 26x14 box. The arrow is drawn here
 * instead; the <i> is only a hook for it. There is no href, so the pointer
 * cursor is set by hand. */
.scores .btn-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 2px;
	margin: 0 6px;
	border: 0;
	background: none;
	color: var(--ccpl-red);
	vertical-align: -3px;
	cursor: pointer;
}

.scores .btn-circle:hover,
.scores .btn-circle:focus {
	background: none;
	color: var(--ccpl-red-dark);
	text-decoration: none;
}

.scores .btn-circle:first-child { margin-left: 0; }

.scores .btn-circle .fa {
	font-style: normal;
	font-family: var(--ccpl-font-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	margin-top: -3px;
	/* The <i> carries Bootstrap's text-white, which is !important. */
	color: inherit !important;
}

.scores .btn-circle .fa-angle-double-left::before { content: "\00AB"; }
.scores .btn-circle .fa-angle-double-right::before { content: "\00BB"; }

/* ----------------------------------------------------------------------------
 * The look, restyled 2026-09-13 to match the tournament tables (tournaments.css)
 * against the live markup: each table a white card with a red-tinted head,
 * lighter column rules, amber for a high score. Everything is under .scores,
 * because compare.html loads this file too and has no site.css tokens. The
 * nth-child rules above are untouched and still encode column positions.
 * --------------------------------------------------------------------------*/

/* The headings: "Week 5 Scores" (with the week arrows) and the season's name
   in the week's header row, then "Season Standings". The league page's
   section label: uppercase, a red rule under it. */
.scores .resultsHeader {
	align-items: baseline;
	margin: 0 0 12px;
	border-bottom: 2px solid var(--ccpl-red);
	padding-bottom: 6px;
}

.scores .resultsHeader > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

.scores h3 {
	font-size: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ccpl-text);
}

.scores .resultsHeader h3.text-end {
	font-size: 17px;
	letter-spacing: .5px;
	text-transform: none;
	color: var(--ccpl-muted);
}

.scores > h3 {
	margin: 28px 0 12px;
	border-bottom: 2px solid var(--ccpl-red);
	padding-bottom: 6px;
	text-align: left;
}

/* Each table in a card. The card draws the outer edge, so the cells on it
   drop theirs. */
.scores .table-responsive {
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .05), 0 8px 20px rgba(var(--ccpl-ink-rgb), .06);
}

.scores .table {
	/* Every column rule above is var(--ccpl-rule); lightened here, for these
	   tables only, rather than restating each rule. */
	--ccpl-rule: rgba(22, 24, 29, .09);
	--bs-table-striped-bg: rgba(var(--ccpl-ink-rgb), .025);
	margin: 0;
	border: 0;
	background-color: var(--ccpl-surface);
	font-variant-numeric: tabular-nums;
}

/* One line per cell: on a phone the card scrolls sideways (.table-responsive)
   rather than wrapping names onto two lines. */
.scores .table th,
.scores .table td {
	white-space: nowrap;
}

.scores .table > :not(caption) > tr > :first-child { border-left: 0; }
.scores .table > :not(caption) > tr > :last-child { border-right: 0; }
.scores .table > thead > tr > th { border-top: 0; }
.scores .table > tbody > tr:last-child > * { border-bottom: 0; }

/* site.css stripes odd rows with a background of its own as well. */
.scores .table-striped > tbody > tr:nth-child(2n+1) {
	background-color: transparent;
}

.scores .table > thead > tr > th {
	background-color: rgba(var(--ccpl-red-rgb), .08);
	color: var(--ccpl-red-dark);
	font-family: var(--ccpl-font-display);
	font-size: 15px;
	letter-spacing: .5px;
	vertical-align: bottom;
	border-bottom: 2px solid rgba(var(--ccpl-red-rgb), .45);
}

/* Bootstrap draws a 2px rule in the text colour under the head: black. */
.scores .table > :not(:first-child) {
	border-top: 0;
}

/* A high score — a machine's on the night, a week's in the season: amber, as
   the tournament pages mark who advanced. site.css paints .win green with
   !important, so this must be !important too, and more specific. */
.scores .table-striped > tbody > tr > td.win {
	--bs-table-accent-bg: transparent;
	background-color: rgba(var(--ccpl-amber-rgb), .30) !important;
	color: var(--ccpl-text);
	font-weight: 700;
}

/* Playoff stars beside a name in the standings, three kinds:
 *   <span class="fa-fw fas fa-star playoff-a">       full
 *   <span class="fa-fw fas fa-star-half playoff-a2"> half
 *   <span class="fa-fw far fa-star playoff-b">       outline
 * FontAwesome glyphs, so since FontAwesome left the repo they drew nothing.
 * The span is the icon now, a Bootstrap Icons star as a mask over its colour
 * (star-fill, star-half, star; MIT). Never style by the fa-* names: these
 * classes are the backend's, and the playoff-* ones say what they mean.
 * The key under the table (.standings-key, layouts/league.njk) reuses them. */
.scores [class*="playoff-"],
.standings-key [class*="playoff-"] {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 7px;
	vertical-align: -1px;
	color: var(--ccpl-amber-deep);
	background-color: currentColor;
	-webkit-mask: var(--star) center / contain no-repeat;
	mask: var(--star) center / contain no-repeat;
}

.scores .playoff-a,
.standings-key .playoff-a {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E");
}

.scores .playoff-a2,
.standings-key .playoff-a2 {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z'/%3E%3C/svg%3E");
}

.scores .playoff-b,
.standings-key .playoff-b {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z'/%3E%3C/svg%3E");
}