/*
 * Front-end standings tables.
 *
 * The surrounding theme (Twenty Twenty-Four) does not switch to a dark colour
 * scheme, so this stylesheet deliberately uses a single light palette. It must
 * NOT respond to prefers-color-scheme on its own: doing so turned the sticky
 * Rank/Player cells dark on a phone in dark mode while the page stayed light,
 * leaving the player names as dark text in a dark box. Text colour is inherited
 * from the theme so names always read correctly.
 */

.shagpoker-wrap {
	--shagpoker-border: #e2e5df;
	--shagpoker-head-bg: #eef0ec;
	--shagpoker-stripe: #f6f7f4;
	--shagpoker-muted: #64706a;
	--shagpoker-surface: #ffffff;

	/* Width of the sticky Rank column; the Player column is offset by exactly
	   this much so the two never overlap. Kept in one place so the header and
	   body always agree. */
	--shagpoker-rank-w: 3.25rem;

	margin: 1.5rem 0;
	font-variant-numeric: tabular-nums;
}

.shagpoker-meta {
	font-size: 0.85em;
	color: var(--shagpoker-muted);
	margin-bottom: 0.6rem;
}

.shagpoker-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--shagpoker-border);
	border-radius: 4px;
}

.shagpoker-points-scroll {
	max-height: 32rem;
	overflow-y: auto;
}

table.shagpoker-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.9rem;
}

table.shagpoker-table th,
table.shagpoker-table td {
	box-sizing: border-box;
	padding: 0.45rem 0.7rem;
	text-align: right;
	border-bottom: 1px solid var(--shagpoker-border);
	white-space: nowrap;
}

table.shagpoker-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--shagpoker-head-bg);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

table.shagpoker-table tbody tr:nth-child(even) {
	background: var(--shagpoker-stripe);
}

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

/* Rank and player stay put while the game columns scroll sideways. The cells
   are opaque and carry the row's own background so scrolled content never shows
   through, and the stripe stays continuous across the whole row. */
.shagpoker-standings .shagpoker-sticky {
	position: sticky;
	background: var(--shagpoker-surface);
	z-index: 1;
}

.shagpoker-standings tbody tr:nth-child(even) .shagpoker-sticky {
	background: var(--shagpoker-stripe);
}

.shagpoker-standings .shagpoker-col-rank {
	left: 0;
	width: var(--shagpoker-rank-w);
	min-width: var(--shagpoker-rank-w);
	max-width: var(--shagpoker-rank-w);
	text-align: center;
	color: var(--shagpoker-muted);
}

.shagpoker-standings .shagpoker-col-player {
	left: var(--shagpoker-rank-w);
	text-align: left;
	font-weight: 600;
	box-shadow: 1px 0 0 var(--shagpoker-border);
}

.shagpoker-standings thead .shagpoker-col-rank,
.shagpoker-standings thead .shagpoker-col-player {
	z-index: 3;
	background: var(--shagpoker-head-bg);
}

.shagpoker-standings .shagpoker-col-total {
	font-weight: 700;
	font-size: 1rem;
}

.shagpoker-standings .shagpoker-col-count {
	text-align: center;
	color: var(--shagpoker-muted);
	font-size: 0.85em;
}

.shagpoker-standings .shagpoker-col-game {
	color: inherit;
}

.shagpoker-standings .shagpoker-absent {
	color: var(--shagpoker-muted);
}

.shagpoker-points {
	display: block;
	line-height: 1.2;
}

.shagpoker-rank-note {
	display: block;
	font-size: 0.7rem;
	color: var(--shagpoker-muted);
	line-height: 1.2;
}

.shagpoker-tie {
	display: block;
	font-size: 0.6rem;
	line-height: 1;
	margin-top: 1px;
	color: var(--shagpoker-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.shagpoker-game th[scope="row"],
.shagpoker-points-table th[scope="row"] {
	text-align: left;
	font-weight: 600;
}

.shagpoker-game td:first-child,
.shagpoker-points-table th:first-child {
	text-align: left;
	color: var(--shagpoker-muted);
}

/* The base rule right-aligns every header; but in these two tables the Finish
   and Player columns read left and only the last column (Points) reads right,
   so the header cells must match or they float away from their column. */
.shagpoker-game thead th:not(:last-child),
.shagpoker-points-table thead th:not(:last-child) {
	text-align: left;
}

.shagpoker-empty {
	color: var(--shagpoker-muted);
	font-style: italic;
}

/* Game picker dropdown for the single-game results view. */
.shagpoker-gamepicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}

.shagpoker-gamepicker label {
	color: var(--shagpoker-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.75rem;
}

.shagpoker-gamepicker select {
	font: inherit;
	color: inherit;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--shagpoker-border);
	border-radius: 4px;
	background: var(--shagpoker-surface);
	max-width: 16rem;
}

/*
 * On laptops/desktops let the season standings grid use more of the screen
 * than the theme's narrow content column, so more game columns show at once.
 * Centres a wider block by breaking out of the constrained container. Only the
 * standings table widens (matched via :has); the game and points tables stay
 * at content width. Mobile is untouched.
 */
@media (min-width: 900px) {
	.shagpoker-wrap:has(.shagpoker-standings) {
		width: min(1500px, 94vw) !important;
		max-width: none !important;
		margin-left: calc(50% - min(750px, 47vw)) !important;
		margin-right: auto !important;
	}
}

@media (max-width: 600px) {
	.shagpoker-wrap {
		--shagpoker-rank-w: 2.75rem;
	}

	table.shagpoker-table {
		font-size: 0.82rem;
	}

	table.shagpoker-table th,
	table.shagpoker-table td {
		padding: 0.4rem 0.5rem;
	}

	.shagpoker-standings .shagpoker-col-player {
		max-width: 8rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---- Player filter box -------------------------------------------------- */
.shagpoker-toolbar {
	margin: 0 0 0.6rem;
}

.shagpoker-filter {
	font: inherit;
	color: inherit;
	width: 100%;
	max-width: 18rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--shagpoker-border);
	border-radius: 6px;
	background: var(--shagpoker-surface);
}

.shagpoker-filter::placeholder {
	color: var(--shagpoker-muted);
}

/* ---- Season "at a glance" summary --------------------------------------- */
.shagpoker-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.shagpoker-stat {
	flex: 1 1 8rem;
	min-width: 8rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--shagpoker-border);
	border-radius: 10px;
	background: var(--shagpoker-surface);
}

.shagpoker-stat-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--shagpoker-muted);
	font-weight: 700;
}

.shagpoker-stat-value {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
}

.shagpoker-stat-sub {
	font-size: 0.8rem;
	color: var(--shagpoker-muted);
	font-variant-numeric: tabular-nums;
}

/* Game winners list -- takes its own full-width row below the stat cards. */
.shagpoker-winners {
	flex-basis: 100%;
	border: 1px solid var(--shagpoker-border);
	border-radius: 10px;
	background: var(--shagpoker-surface);
	padding: 0.8rem 1rem;
}

.shagpoker-winners-label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--shagpoker-muted);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.shagpoker-winners-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.35rem 1.4rem;
}

/* Game number and winner on one line, so the name can't visually group with
   the game number in the row below it. */
.shagpoker-winners-list li {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	line-height: 1.4;
}

.shagpoker-winners-list .shagpoker-winners-game {
	flex: none;
}

.shagpoker-winners-game {
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--shagpoker-muted);
	font-weight: 700;
}

.shagpoker-winners-name {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
}

/* ---- Schedule ----------------------------------------------------------- */
.shagpoker-schedule th[scope="row"] {
	text-align: left;
	font-weight: 600;
}

.shagpoker-schedule td:nth-child(2) {
	text-align: left;
}

.shagpoker-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--shagpoker-border);
	color: var(--shagpoker-muted);
}

.shagpoker-badge.is-played {
	color: #1c6b3f;
	border-color: #bfe0cd;
	background: #eaf5ee;
}

.shagpoker-badge.is-pending {
	color: #8a6100;
	border-color: #e6cf96;
	background: #fbf4e4;
}

.shagpoker-schedule tr.is-upcoming td,
.shagpoker-schedule tr.is-upcoming th {
	color: var(--shagpoker-muted);
}

/* ---- Player profiles ---------------------------------------------------- */

/* Player names are links wherever they appear. They stay looking like text
   until hovered, so the standings table does not turn into a wall of blue. */
.shagpoker-player-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--shagpoker-border);
}

.shagpoker-player-link:hover,
.shagpoker-player-link:focus {
	color: #1c6b3f;
	border-bottom-color: currentColor;
}

.shagpoker-profile-head {
	margin: 0 0 1rem;
}

.shagpoker-profile-name {
	margin: 0;
	line-height: 1.15;
}

.shagpoker-profile-sub {
	margin: 0.2rem 0 0;
	color: var(--shagpoker-muted);
	font-size: 0.9rem;
}

.shagpoker-statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* Prize money reads as a figure, not prose. */
.shagpoker-money {
	font-variant-numeric: tabular-nums;
}

/* Movement marker under a rank in the standings. Sits inside the sticky Rank
   cell rather than in a column of its own, so the sticky Player offset (which
   is driven by --shagpoker-rank-w) stays correct on mobile. */
.shagpoker-rankmove {
	display: block;
	font-size: 0.62rem;
	line-height: 1;
	margin-top: 2px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.shagpoker-rankmove.is-up {
	color: #1c6b3f;
}

.shagpoker-rankmove.is-down {
	color: #b32d2e;
}

.shagpoker-rankmove.is-new {
	color: var(--shagpoker-muted);
	font-size: 0.58rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---- Season race chart --------------------------------------------------
   Chart ink is deliberately its own scale, one shade off the surface, so the
   grid recedes and the series carry the eye. NOTE: like the rest of this file
   it stays on a single light palette -- a prefers-color-scheme block here
   would reintroduce the dark-on-dark bug fixed in 1.0.x. */
.shagpoker-race {
	--race-grid: #e1e0d9;
	--race-axis: #c3c2b7;
	--race-muted: #898781;
	--race-ink: #52514e;
}

.shagpoker-race-plot {
	position: relative;
	margin: 0.25rem 0 0.5rem;
	border-radius: 6px;
}

.shagpoker-race-plot:focus-visible {
	outline: 2px solid #1c6b3f;
	outline-offset: 2px;
}

.shagpoker-race-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: inherit;
}

/* Solid hairlines. Dashes would read as "projection" when this is just a grid. */
.shagpoker-race-grid {
	stroke: var(--race-grid);
	stroke-width: 1;
}

.shagpoker-race-axis {
	stroke: var(--race-axis);
	stroke-width: 1;
}

/* Type sizes are in viewBox units and the chart scales to its container, so
   these are set for the smallest width it renders at rather than for the
   nominal 760. */
.shagpoker-race-tick {
	fill: var(--race-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.shagpoker-race-axis-title {
	fill: var(--race-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* The field is drawn as grey context so everyone can find their own line
   without fifteen hues fighting each other. Identity is opt-in. */
.shagpoker-race-line {
	fill: none;
	stroke-width: 1.25;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Scoped to NOT(.is-on) deliberately. A plain `.shagpoker-race-line { stroke }`
   rule wins over the stroke="..." presentation attribute the coloured lines
   carry, which left every line grey with only the dots coloured. */
.shagpoker-race-series:not(.is-on) .shagpoker-race-line {
	stroke: #d7d6cf;
}

.shagpoker-race-series.is-on .shagpoker-race-line {
	stroke-width: 2.25;
}

/* With sixty-five lines on screen the grey field is thinned so the picked
   players still read through it. */
.shagpoker-race.field-all .shagpoker-race-series:not(.is-on) .shagpoker-race-line {
	stroke-width: 1;
	opacity: 0.75;
}

/* Every entrant is in the DOM; which of them reach the chart is a three-way
   choice. Picked players are shown in every mode -- ticking a name must always
   put that line on screen, whatever the field is set to. */
.shagpoker-race-series {
	display: none;
}

.shagpoker-race-series.is-on,
.shagpoker-race.field-top .shagpoker-race-series.is-context,
.shagpoker-race.field-all .shagpoker-race-series {
	display: inline;
}

.shagpoker-race-series .shagpoker-race-dot,
.shagpoker-race-series .shagpoker-race-endlabel {
	display: none;
}

.shagpoker-race-series.is-on .shagpoker-race-dot,
.shagpoker-race-series.is-on .shagpoker-race-endlabel {
	display: block;
}

/* A shown line draws over the grey field, never under part of it. */
.shagpoker-race-series.is-on {
	paint-order: normal;
}

/* Dashes are wrong for a gridline but right here: this IS a threshold, and
   reading as one is the point. */
.shagpoker-race-cut {
	fill: none;
	stroke: #b32d2e;
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
	stroke-linecap: round;
}

.shagpoker-race-cutlabel {
	fill: #b32d2e;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* The ring is the surface showing through, so crossing lines stay readable
   without drawing a border around every mark. */
.shagpoker-race-dot {
	stroke: var(--shagpoker-surface);
	stroke-width: 2;
}

/* Labels wear ink, never the series colour -- the dot beside them carries
   identity. */
.shagpoker-race-endlabel {
	fill: var(--race-ink);
	font-size: 13.5px;
	font-weight: 600;
}

/* Give the chart more room than the theme's narrow column on desktop -- at
   content width the labels shrink with the viewBox and stop being legible.
   Narrower than the standings breakout: a chart does not need 1500px. */
@media (min-width: 900px) {
	.shagpoker-wrap.shagpoker-race {
		width: min(1040px, 92vw) !important;
		max-width: none !important;
		margin-left: calc(50% - min(520px, 46vw)) !important;
		margin-right: auto !important;
	}
}

.shagpoker-race-crosshair {
	stroke: var(--race-axis);
	stroke-width: 1;
}

/* The [hidden] attribute sets display:none, which a display:grid rule would
   otherwise beat -- leaving an empty tooltip box parked on the chart. */
.shagpoker-race-tip[hidden] {
	display: none;
}

.shagpoker-race-tip {
	position: absolute;
	top: 0.5rem;
	z-index: 2;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.1rem 0.4rem;
	align-items: center;
	pointer-events: none;
	background: var(--shagpoker-surface);
	border: 1px solid var(--shagpoker-border);
	border-radius: 6px;
	padding: 0.45rem 0.6rem;
	font-size: 0.78rem;
	line-height: 1.35;
	box-shadow: 0 2px 8px rgba(11, 11, 11, 0.08);
	white-space: nowrap;
}

.shagpoker-race-tip strong {
	grid-column: 1 / -1;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--shagpoker-muted);
}

.shagpoker-race-tipdot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.shagpoker-race-tipval {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Picker doubles as the legend. */
.shagpoker-race-picker {
	border: 1px solid var(--shagpoker-border);
	border-radius: 8px;
	padding: 0.6rem 0.85rem 0.75rem;
	margin: 0;
}

.shagpoker-race-picker legend {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--shagpoker-muted);
	font-weight: 700;
	padding: 0 0.35rem;
}

.shagpoker-race-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	margin-bottom: 0.5rem;
}

.shagpoker-race-fieldtoggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.84rem;
	color: var(--shagpoker-muted);
	cursor: pointer;
	min-height: 1.9rem;
}

.shagpoker-race-search {
	display: block;
	width: 100%;
	max-width: 15rem;
	margin: 0;
	padding: 0.35rem 0.55rem;
	font-size: 0.88rem;
	border: 1px solid var(--shagpoker-border);
	border-radius: 6px;
	background: var(--shagpoker-surface);
	color: inherit;
}

/* Every entrant is listed, so the box scrolls rather than running the page
   on for sixty-five rows. */
.shagpoker-race-pickerlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.1rem 0.9rem;
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Marks where the money stops, in rank order. */
.shagpoker-race-cutrow {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.35rem 0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: #b32d2e;
}

.shagpoker-race-cutrow::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px dashed #b32d2e;
	opacity: 0.5;
}

.shagpoker-race-picker label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.88rem;
	padding: 0.2rem 0;
	cursor: pointer;
	/* Comfortable hit target rather than a pinpoint checkbox. */
	min-height: 1.9rem;
}

.shagpoker-race-picker input {
	flex: none;
	margin: 0;
}

.shagpoker-race-pickernote {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: #b32d2e;
}

.shagpoker-race-pickernote[hidden] {
	display: none;
}

/* An unticked player still shows a swatch outline, so the control reads as a
   colour slot waiting to be filled rather than a broken legend. */
.shagpoker-race-swatch {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--shagpoker-border);
}

.shagpoker-race-who {
	flex: 1 1 auto;
}

.shagpoker-race-swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex: none;
	transform: translateY(1px);
}

/* Fixed width so the names start on a common left edge and the column reads
   as a list rather than ragged text. */
.shagpoker-race-total {
	flex: none;
	min-width: 2.6rem;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--shagpoker-muted);
}

.shagpoker-race-table {
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

.shagpoker-race-table summary {
	cursor: pointer;
	color: var(--shagpoker-muted);
	font-weight: 600;
}

.shagpoker-race-table .shagpoker-scroll {
	margin-top: 0.5rem;
}

@media (max-width: 600px) {
	.shagpoker-race-endlabel {
		font-size: 13px;
	}

	.shagpoker-race-tick {
		font-size: 13px;
	}
}

/* ---- Add-to-calendar ---------------------------------------------------- */
.shagpoker-calendar {
	margin: 0.75rem 0 0;
}

.shagpoker-calendar-link {
	display: inline-block;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--shagpoker-border);
	border-radius: 6px;
	background: var(--shagpoker-surface);
	color: inherit;
	text-decoration: none;
}

.shagpoker-calendar-link:hover,
.shagpoker-calendar-link:focus {
	background: #1c6b3f;
	border-color: #1c6b3f;
	color: #fff;
}

.shagpoker-calendar-note {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--shagpoker-muted);
}

/* ---- Records / leaderboards --------------------------------------------- */
.shagpoker-records {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.75rem;
}

.shagpoker-record {
	border: 1px solid var(--shagpoker-border);
	border-radius: 10px;
	background: var(--shagpoker-surface);
	padding: 0.8rem 1rem 0.9rem;
}

.shagpoker-record-title {
	margin: 0;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--shagpoker-muted);
	font-weight: 700;
}

.shagpoker-record-note {
	margin: 0.15rem 0 0;
	font-size: 0.72rem;
	color: var(--shagpoker-muted);
	font-style: italic;
}

.shagpoker-record-list {
	list-style: none;
	margin: 0.55rem 0 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.shagpoker-record-list li {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.22rem 0;
	line-height: 1.3;
	border-bottom: 1px solid var(--shagpoker-border);
}

.shagpoker-record-list li:last-child {
	border-bottom: 0;
}

.shagpoker-record-pos {
	flex: none;
	min-width: 1.9rem;
	font-size: 0.72rem;
	color: var(--shagpoker-muted);
	font-weight: 700;
}

.shagpoker-record-name {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.92rem;
}

.shagpoker-record-value {
	flex: none;
	font-weight: 700;
	font-size: 0.88rem;
}

/* Distribution boards: a count, then either the one person on it or a
   disclosure for the group. */
.shagpoker-spread {
	list-style: none;
	margin: 0.55rem 0 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.shagpoker-spread > li {
	border-bottom: 1px solid var(--shagpoker-border);
}

.shagpoker-spread > li:last-child {
	border-bottom: 0;
}

.shagpoker-spread summary,
.shagpoker-spread-solo {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.28rem 0;
	line-height: 1.3;
}

.shagpoker-spread summary {
	cursor: pointer;
}

.shagpoker-spread summary::-webkit-details-marker {
	display: none;
}

/* The triangle is drawn by hand so the solo rows can align to the same grid
   without one -- a marker on a group of one would promise a list. */
.shagpoker-spread summary::before {
	content: "\25B8";
	color: var(--shagpoker-muted);
	font-size: 0.7rem;
	width: 0.7rem;
	flex: none;
}

.shagpoker-spread details[open] > summary::before {
	content: "\25BE";
}

.shagpoker-spread-solo {
	padding-left: 1.15rem;
}

.shagpoker-spread-value {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.9rem;
}

.shagpoker-spread-count,
.shagpoker-spread-name {
	flex: none;
	font-size: 0.86rem;
	color: var(--shagpoker-muted);
}

.shagpoker-spread-name {
	color: inherit;
	font-weight: 600;
}

.shagpoker-spread-names {
	list-style: none;
	margin: 0 0 0.4rem;
	padding: 0 0 0 1.15rem;
	columns: 2;
	column-gap: 1rem;
}

.shagpoker-spread-names li {
	font-size: 0.85rem;
	padding: 0.1rem 0;
	break-inside: avoid;
}

@media (max-width: 480px) {
	.shagpoker-spread-names {
		columns: 1;
	}
}

/* Scoring formula: the bands read as labels, not figures to compare. */
.shagpoker-formula th[scope="row"] {
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
}

.shagpoker-formula thead th:not(:last-child),
.shagpoker-formula td:first-of-type {
	text-align: left;
}

.shagpoker-formula td:last-child {
	color: var(--shagpoker-muted);
}

/* Payout table: Finish and Share read as labels, only the money reads right. */
.shagpoker-payouts th[scope="row"] {
	text-align: left;
	font-weight: 600;
}

.shagpoker-payouts thead th:not(:last-child),
.shagpoker-payouts td:first-of-type {
	text-align: left;
}

.shagpoker-payouts td:first-of-type {
	color: var(--shagpoker-muted);
}

/* The total exists to be checked against the pot, so it stands out. */
.shagpoker-payouts tfoot th,
.shagpoker-payouts tfoot td {
	border-top: 2px solid var(--shagpoker-border);
	border-bottom: 0;
	font-weight: 700;
}

/* Rank movement since the previous game. */
.shagpoker-move {
	font-weight: 700;
}

.shagpoker-move.is-up {
	color: #1c6b3f;
}

.shagpoker-move.is-down {
	color: #b32d2e;
}

/* Game-by-game table: the first two columns read as labels, the numbers right. */
.shagpoker-playergames th[scope="row"] {
	text-align: left;
	font-weight: 600;
}

.shagpoker-playergames td:first-of-type,
.shagpoker-playergames thead th:nth-child(1),
.shagpoker-playergames thead th:nth-child(2) {
	text-align: left;
}

/* A night that does not count toward the best-8 total, and a night the player
   missed, both recede -- but stay readable. */
.shagpoker-playergames tr.is-dropped th,
.shagpoker-playergames tr.is-dropped td,
.shagpoker-playergames tr.is-absent th,
.shagpoker-playergames tr.is-absent td {
	color: var(--shagpoker-muted);
}

.shagpoker-playergames tr.is-absent {
	font-style: italic;
}

/* Directory shown when no player has been chosen. */
.shagpoker-playerindex {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.35rem 1.4rem;
}

.shagpoker-playerindex li {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	line-height: 1.4;
}

.shagpoker-playerindex .shagpoker-winners-game {
	flex: none;
	min-width: 2.5rem;
}

.shagpoker-playerindex .shagpoker-winners-name {
	flex: 1 1 auto;
}

.shagpoker-index-points {
	flex: none;
	font-size: 0.85rem;
	color: var(--shagpoker-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- Email signup ------------------------------------------------------- */
.shagpoker-signup-heading {
	font-weight: 700;
	margin: 0 0 0.4rem;
}

.shagpoker-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.shagpoker-signup-form input[type="email"] {
	font: inherit;
	flex: 1 1 14rem;
	max-width: 22rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--shagpoker-border);
	border-radius: 6px;
	background: var(--shagpoker-surface);
	color: inherit;
}

.shagpoker-signup-form button {
	font: inherit;
	font-weight: 600;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: 6px;
	background: #1c6b3f;
	color: #fff;
	cursor: pointer;
}

.shagpoker-signup-form button:hover {
	background: #175733;
}

.shagpoker-signup-msg {
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.shagpoker-signup-msg.is-invalid {
	color: #b32d2e;
}

.shagpoker-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.shagpoker-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}