/**
 * Results and league tables.
 *
 * Deliberately unopinionated about colour and typography: the club theme
 * supplies those, and a plugin that imposes its own palette looks bolted on.
 * What this does own is the layout, and above all the small-screen behaviour —
 * StreetO results get read on a phone in a car park.
 */

/* The event table is dropped straight under the organiser's report on the
   event page, where the prose otherwise runs into the header row with nothing
   between them. The rule and the heading are that break. Only the event block
   carries it: the league table sits below the event table rather than below
   body text, and already opens with its own heading. */
.mvoc-streeto-event {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 2em;
	padding-top: 1em;
}

.mvoc-streeto-event-heading {
	margin-top: 0;
}

.mvoc-streeto-table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 0.5em;
}

.mvoc-streeto-table th,
.mvoc-streeto-table td {
	padding: 0.4em 0.6em;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	vertical-align: top;
}

.mvoc-streeto-table thead th {
	font-weight: 600;
	white-space: nowrap;
	border-bottom-width: 2px;
}

/* Numeric columns read better right-aligned and hard to confuse when they line
   up. Both tables open the same way — Pos, then the Ladies, M55 and W55
   rankings, then Name — but what follows differs, so each says where its own
   figures start rather than sharing a rule that can only suit one of them. */
.mvoc-streeto-league-table td:nth-child(n + 5),
.mvoc-streeto-league-table thead th:nth-child(n + 5),
.mvoc-streeto-event .mvoc-streeto-table td:nth-child(n + 7),
.mvoc-streeto-event .mvoc-streeto-table thead th:nth-child(n + 7) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* In the league table, column 5 is Name. Its body cell is a <th>, so the rule
   above never touched it, but its header cell is a <th> like the rest of the
   header row and was caught by it — left it here rather than excluded. The
   event table's Name sits at 5 too, ahead of Course, so its own rule starts
   past both and needs no such exception. */
.mvoc-streeto-league-table thead th:nth-child(5) {
	text-align: left;
}

.mvoc-streeto-organiser {
	font-style: italic;
	opacity: 0.85;
}

.mvoc-streeto-tag {
	font-size: 0.8em;
	font-style: normal;
	opacity: 0.7;
	margin-left: 0.4em;
}

/* The scaled-course asterisk belongs to the total it qualifies, not to a line
   of its own underneath it — the Total column is narrow enough to break there
   at any width. */
.mvoc-streeto-event .mvoc-streeto-table td:nth-child(9) {
	white-space: nowrap;
}

.mvoc-streeto-scaled {
	text-decoration: none;
	cursor: help;
}

/* Shown only by the narrow-screen rule below, where the columns it explains
   are actually missing. */
.mvoc-streeto-narrow-note {
	display: none;
}

.mvoc-streeto-footnote {
	font-size: 0.85em;
	opacity: 0.75;
	margin: 0.25em 0;
}

.mvoc-streeto-draft {
	padding: 0.5em 0.75em;
	border-left: 4px solid currentColor;
	opacity: 0.8;
	font-size: 0.9em;
}

/* Wide content scrolls inside its own container rather than making the whole
   page scroll sideways. */
.mvoc-streeto-scroll {
	overflow-x: auto;
}

.mvoc-streeto-league-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 0.6em;
}

.mvoc-streeto-league-filters button {
	font: inherit;
	padding: 0.25em 0.75em;
	border: 1px solid currentColor;
	border-radius: 1em;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
}

.mvoc-streeto-league-filters button[aria-pressed="true"] {
	opacity: 1;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.08);
}

.mvoc-streeto-detail summary {
	cursor: pointer;
	font-weight: inherit;
}

.mvoc-streeto-events {
	list-style: none;
	margin: 0.4em 0 0.6em;
	padding: 0;
	font-size: 0.9em;
	font-weight: normal;
}

.mvoc-streeto-events li {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	max-width: 22em;
	padding: 0.15em 0;
}

.mvoc-streeto-event-points {
	font-variant-numeric: tabular-nums;
}

.mvoc-streeto-organiser-bonus {
	font-style: italic;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 0.2em;
	padding-top: 0.3em;
}

/*
 * Narrow screens keep the grid and drop columns, rather than unfolding each
 * runner into a stack of labelled lines. The stack was honest but unreadable:
 * seven lines a runner, so a sixty-strong field ran to twenty-odd screens and
 * nobody could scan for a name or a position. A table that has shed its least-
 * read columns still reads as a table.
 *
 * Both tables now behave the same way on a phone, which they did not before.
 * Anything that still overflows scrolls inside .mvoc-streeto-scroll rather
 * than dragging the page sideways.
 */

/* First to go, on both tables: the category rankings. They are the least-read
   part of either table, and the same rankings are available in full through
   the per-category league shortcodes. */
@media (max-width: 560px) {
	.mvoc-streeto .mvoc-streeto-category-col {
		display: none;
	}
}

/*
 * Then, at portrait-phone width, the event table's working: Course (6), Score
 * (7) and Penalty (8). What is left is Pos, Name, Total and League pts — which
 * is what someone standing in a car park is looking for. The three are one
 * rotation away, and the footnote says so.
 *
 * Counted by nth-child, which goes by position in the markup, so hiding the
 * category columns above does not renumber these.
 */
@media (max-width: 480px) {
	.mvoc-streeto-event .mvoc-streeto-table td:nth-child(6),
	.mvoc-streeto-event .mvoc-streeto-table thead th:nth-child(6),
	.mvoc-streeto-event .mvoc-streeto-table td:nth-child(7),
	.mvoc-streeto-event .mvoc-streeto-table thead th:nth-child(7),
	.mvoc-streeto-event .mvoc-streeto-table td:nth-child(8),
	.mvoc-streeto-event .mvoc-streeto-table thead th:nth-child(8) {
		display: none;
	}

	/* Headings may wrap here — "League pts" over two short lines costs less
	   than a table that scrolls sideways — and the cells give back the padding
	   they can spare. Between them these are what keep the four columns inside
	   a portrait screen rather than just outside one. */
	.mvoc-streeto-event .mvoc-streeto-table thead th {
		white-space: normal;
	}

	.mvoc-streeto-event .mvoc-streeto-table th,
	.mvoc-streeto-event .mvoc-streeto-table td {
		padding: 0.4em 0.3em;
	}

	.mvoc-streeto-narrow-note {
		display: block;
	}
}