/*
	THE AWARD REFERENCE PAGES: the hub at /awards/shows/, one page per show under
	/awards/<show>/, and one page per cycle under /awards/<cycle>/.

	Loaded as pageStyles: [tokens, news, chrome, awards], so the palette arrives from
	tokens.css, the .wrap and the focus rule from news.css, and the masthead and sign-off
	from chrome.css. This file styles only what these three pages add: their head, the
	show cards, the milestone table and the source credits.

	IT WEARS THE AWARD TRACKER'S COLOUR WITHOUT BORROWING ITS STYLESHEET. tracker.css maps
	its four hues off a data-tracker attribute, which names a page rather than a family, so
	these pages point --band-accent at the same two tokens directly and own every rule
	below. A reader moving from /award-watch/ to /awards/shows/ stays inside one colour and
	one rhythm; a change to the tracker's own board cannot reach in here and move a card.

	The grammar is the rest of the site's: a kicker with a dash, a display heading, one
	mono line of counts, ruled sections, and the accent living on dates and leading edges
	rather than washed behind type.

	Keyboard hyphen only, sentence-case, no BEM: descriptive names and native nesting.
*/

.awards-main {
	/* The award tracker's lilac, read straight off the tokens rather than through
	   tracker.css's page map. #c99df0 measures 9.01:1 on the carbon canvas, so it works
	   as ink and as a rule with no second variant. */
	--band-accent: var(--tracker-award);
	--band-accent-text: var(--tracker-award-text);
	--band-row-rule: color-mix(in srgb, var(--band-accent) 20%, var(--hairline));

	/* The page changes the colour of everything else, so the focus ring follows it,
	   exactly as the tracker pages do. */
	--focus-ring: var(--band-accent-text);

	padding-block-end: clamp(3rem, 7vw, 5.5rem);
}

/* Wider than the 44rem reading column the prose pages use: these pages carry tables and
   a card grid rather than paragraphs. Same measure as the tracker boards. */
.awards-inner {
	max-width: 68rem;
	margin-inline: auto;
	padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* ---------------------------------------------------------------- the head */
/*
	The tracker's lockup: a small kicker naming what kind of page this is, the subject at
	display scale, one line of connective prose, and a mono row of counts. On a cycle page
	the kicker is a link back to its show, which is the one piece of furniture that changes
	between the three templates.
*/

.awards-head {
	padding-block-end: clamp(1.5rem, 3vw, 2.25rem);
	border-block-end: 1px solid var(--hairline);
	margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
}

.awards-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--band-accent-text);

	&::before {
		content: '';
		flex: none;
		width: 1.75rem;
		height: 3px;
		background-color: var(--band-accent);
	}

	& a {
		color: inherit;
		text-decoration: none;
		border-block-end: 1px solid transparent;

		&:hover {
			border-block-end-color: currentColor;
		}
	}
}

.awards-title {
	margin-block-start: 0.75rem;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 5vw, 3.35rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--text);
	text-wrap: balance;
}

.awards-angle {
	margin-block-start: clamp(0.9rem, 1.8vw, 1.25rem);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.5;
	color: var(--text);
	max-width: 54ch;
	text-wrap: pretty;
}

/* The counts, divided rather than punctuated, the same way every other board on the site
   divides its figures. Tabular so two of these pages compare without the numbers moving. */
.awards-summary {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.6rem;
	margin-block-start: clamp(1rem, 2vw, 1.4rem);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;

	& span + span::before {
		content: '\00b7';
		margin-inline-end: 0.6rem;
		color: var(--muted-2);
	}
}

.awards-note {
	margin-block-start: clamp(0.9rem, 1.8vw, 1.2rem);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 66ch;
	text-wrap: pretty;
}

/* The line that sends a reader to the runway. It is the only cross-link in the head, so
   it carries a rule under the link rather than a button: the reference and the tracker
   are two views of one thing, not two products. */
.awards-crosslink {
	margin-block-start: 0.9rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 66ch;

	& a {
		color: var(--band-accent-text);
		text-decoration: none;
		border-block-end: 1px solid color-mix(in srgb, var(--band-accent) 45%, transparent);

		&:hover {
			border-block-end-color: var(--band-accent);
		}
	}
}

/* ------------------------------------------------------------- the sections */

.awards-section {
	margin-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1.5rem;
	row-gap: 0.35rem;
}

.section-title {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--text);
}

.section-count {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.section-note {
	margin-block-start: 0.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 66ch;
	text-wrap: pretty;
}

/* --------------------------------------------------------------- next up */
/*
	The one thing most readers came to a show page for: the nearest milestone it has
	confirmed, at a size that finds itself. A show with nothing confirmed shows the words
	the last check read instead, at the same weight, because "no date announced" is an
	answer rather than an empty state.
*/

.next-up {
	margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
	padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.05rem, 2.4vw, 1.5rem);
	background: color-mix(in srgb, var(--band-accent) 3%, var(--panel));
	border: 1px solid color-mix(in srgb, var(--band-accent) 22%, var(--hairline));
	border-inline-start: 3px solid var(--band-accent);
	border-radius: 2px;
}

.next-up-heading {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--band-accent-text);
}

.next-up-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
	row-gap: 0.2rem;
	margin-block-start: 0.55rem;
}

.next-up-label {
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--text);
}

.next-up-date {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--band-accent-text);
	font-variant-numeric: tabular-nums;
}

.next-up-countdown {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.next-up-words {
	margin-block-start: 0.55rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text);
	max-width: 62ch;
	text-wrap: pretty;
}

.next-up-edition {
	margin-block-start: 0.5rem;
	font-size: 0.88rem;

	& a {
		color: var(--muted);
		text-decoration: none;
		border-block-end: 1px solid var(--hairline-bright);

		&:hover {
			color: var(--text);
			border-block-end-color: var(--band-accent);
		}
	}
}

/* ------------------------------------------------------------ the show cards */
/*
	The hub's grid. One card per show, the whole card one link, in the story row's own
	grammar: a tinted panel with the accent on the leading edge, never a wash behind type.
	A show with nothing announced keeps the panel and drops the leading edge to a hairline,
	so the two groups read apart at a glance without being told apart by colour alone: each
	group also has its own heading above it.
*/

.show-cards {
	display: grid;
	gap: 0.85rem;
	margin-block-start: clamp(1.1rem, 2.2vw, 1.5rem);
}

.show-card {
	display: block;
	padding: 1.05rem 1.15rem;
	background: color-mix(in srgb, var(--band-accent) 3%, var(--panel));
	border: 1px solid color-mix(in srgb, var(--band-accent) 22%, var(--hairline));
	border-inline-start: 3px solid var(--band-accent);
	border-radius: 2px;
	text-decoration: none;

	&:hover {
		border-color: color-mix(in srgb, var(--band-accent) 45%, var(--hairline));
	}
}

.show-card-quiet {
	background: var(--panel);
	border-color: var(--hairline);
	border-inline-start-color: var(--hairline-bright);

	&:hover {
		border-color: var(--hairline-bright);
	}
}

.show-card-kind {
	font-family: var(--font-display);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.show-card-name {
	margin-block-start: 0.4rem;
	font-size: clamp(1.05rem, 1.7vw, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--text);
	text-wrap: balance;
}

.show-card-next {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.55rem;
	row-gap: 0.1rem;
	margin-block-start: 0.55rem;
}

.show-card-label {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--text);
}

.show-card-date {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--band-accent-text);
	font-variant-numeric: tabular-nums;
}

/* Always on its own line under the date, whatever the show's name did to the wrap above
   it. Left to flow, a short name puts the countdown beside the date and a long one drops
   it below, and a grid of cards that disagree about where the countdown lives is a grid a
   reader has to read twice. */
.show-card-countdown {
	flex-basis: 100%;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.show-card-words {
	margin-block-start: 0.55rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 56ch;
	text-wrap: pretty;
}

.show-card-meta {
	margin-block-start: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--muted-2);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- the cycles on a show */

.edition-block {
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	border-block-end: 1px solid var(--band-row-rule);

	&:first-of-type {
		border-block-start: 1px solid var(--hairline-bright);
		margin-block-start: clamp(1.1rem, 2.2vw, 1.5rem);
	}

	/* The rules between cycles divide them; a rule under the last one would divide it
	   from the way back, which the way back already draws for itself, and the padding
	   under it would open a band of nothing between the two. */
	&:last-of-type {
		padding-block-end: 0;
		border-block-end: 0;
	}
}

.edition-block-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1.25rem;
	row-gap: 0.2rem;
}

.edition-block-title {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 600;
	line-height: 1.3;

	& a {
		color: var(--text);
		text-decoration: none;
		border-block-end: 1px solid transparent;

		&:hover {
			border-block-end-color: var(--band-accent);
		}
	}
}

.edition-block-when {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--band-accent-text);
	font-variant-numeric: tabular-nums;
}

.edition-block-status {
	margin-block-start: 0.35rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--muted);
}

/* ------------------------------------------------------- the milestone table */
/*
	The heart of a cycle page: what happens and when, in two columns at every width, with
	the venue, the broadcaster and the words the last check read on a line under the row.

	IT WAS FOUR COLUMNS FIRST, AND FOUR WAS WRONG. Most cycles fill Where and Watch on one
	row out of four, so two columns sat mostly empty while pushing the table past a phone;
	on a 390 screen that put the honest words under an unannounced row behind a sideways
	scroll, which is the one thing on this page a reader most needs to read. Two columns
	that always fit beat four that mostly do not.

	A row below confidence "confirmed" carries a short tag in the When column instead of a
	date. That shape is the rule made visible: the date column is only ever dates.
*/

.milestone-table {
	width: 100%;
	margin-block-start: clamp(1rem, 2vw, 1.4rem);
	border-collapse: collapse;
	text-align: start;

	& th,
	& td {
		padding: 0.7rem 1rem 0.7rem 0;
		vertical-align: baseline;
		text-align: start;
	}

	& thead th {
		font-family: var(--font-display);
		font-size: 0.64rem;
		font-weight: 400;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--muted-2);
		border-block-end: 1px solid var(--hairline-bright);
		white-space: nowrap;
	}

	& tbody th {
		font-size: 0.92rem;
		font-weight: 600;
		line-height: 1.35;
		color: var(--text);
	}

	& tbody td {
		font-size: 0.88rem;
		line-height: 1.45;
		color: var(--muted);
	}

	& tbody tr {
		border-block-end: 1px solid var(--band-row-rule);
	}

	/* The note row belongs to the row above it, so the rule between them goes and the
	   words sit tight under their own milestone. */
	& tbody tr:has(+ .milestone-note) {
		border-block-end: 0;
	}

	/* The table closes on whatever rule the block around it draws, rather than stacking a
	   second one against it a few pixels away. */
	& tbody tr:last-child {
		border-block-end: 0;
	}
}

/* A confirmed date is the only thing in this table set in the show's colour, so a reader
   can see which rows are dates and which are words without reading either. */
.milestone-when {
	white-space: nowrap;

	& time {
		font-family: var(--font-mono);
		font-size: 0.84rem;
		color: var(--band-accent-text);
		font-variant-numeric: tabular-nums;
	}
}

.milestone-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-2);
	border: 1px solid var(--hairline-bright);
	padding: 0.15rem 0.45rem;
	white-space: normal;
}

/* The line under a row: where it is held and who carries it, then the words. It belongs to
   the row above it, so it takes no rule of its own and sits tight under it. */
.milestone-note {
	& td {
		padding-block: 0 0.85rem;
		white-space: normal;
	}
}

/* Divided rather than punctuated, the same way the counts line at the top of the page
   divides its figures. */
.milestone-detail {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.55rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--muted);

	& span + span::before {
		content: '\00b7';
		margin-inline-end: 0.55rem;
		color: var(--muted-2);
	}
}

.milestone-words {
	margin-block-start: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--muted-2);
	max-width: 68ch;
	text-wrap: pretty;
}

/* -------------------------------------------------------- eligibility window */

.eligibility {
	margin-block-start: clamp(0.9rem, 1.8vw, 1.2rem);
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--band-accent-text);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- the sources */
/*
	Attribution, in the site's own discipline: every line on the page names the page it was
	read off and the day it was last looked at. A source on a host this project never links
	keeps its name and loses its anchor, which build-award-pages.js decides by clearing the
	URL, so the markup here cannot render one by accident.
*/

.source-list {
	margin-block-start: clamp(1rem, 2vw, 1.4rem);
	border-block-start: 1px solid var(--hairline-bright);
}

.source-item {
	display: grid;
	gap: 0.25rem;
	padding-block: 0.8rem;
	border-block-end: 1px solid var(--band-row-rule);

	/* The last credit drops its rule: the way back sits under this list behind a rule of
	   its own, and two rules a few pixels apart read as an empty row. */
	&:last-child {
		border-block-end: 0;
	}
}

.source-labels {
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--text);
}

.source-line {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--muted-2);
	overflow-wrap: anywhere;
}

.source-domain {
	color: var(--muted);
}

a.source-domain {
	color: var(--band-accent-text);
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--band-accent) 40%, transparent);

	&:hover {
		border-block-end-color: var(--band-accent);
	}
}

/* ------------------------------------------------------------- the way back */

.awards-links {
	margin-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
	padding-block-start: clamp(1.1rem, 2.2vw, 1.5rem);
	border-block-start: 1px solid var(--hairline);

	& ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem 1.75rem;
	}

	& a {
		font-size: 0.9rem;
		color: var(--muted);
		text-decoration: none;
		border-block-end: 1px solid var(--hairline-bright);

		&:hover {
			color: var(--text);
			border-block-end-color: var(--band-accent);
		}
	}
}

/* ------------------------------------------------------------ breakpoints */

@media (min-width: 600px) {
	/* Two cards across as soon as a card can hold its name on one line. The grid stays
	   auto-fit so a tenth show fills the row rather than starting a lonely one. */
	.show-cards {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

@media (min-width: 768px) {
	/* The label column takes a fixed measure and the date sits straight after it, the same
	   proportion the award tracker's own dates list uses, so the two pages line their
	   milestones up in the same place. Fixed layout is what makes the measure hold: under
	   automatic layout a table this wide hands the spare room to the first column and pushes
	   every date halfway across the page. Below this width the columns share the room
	   automatically, which is what a phone wants. */
	.milestone-table {
		table-layout: fixed;

		& thead th:first-child {
			width: 14rem;
		}

		& th,
		& td {
			padding-block: 0.85rem;
		}

		& .milestone-note td {
			padding-block: 0 0.9rem;
		}
	}

	.source-item {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		align-items: baseline;
		column-gap: 1.5rem;
	}
}