/*
	The four tracker pages: /release-calendar/, /tour-guide/, /festival-tracker/ and
	/award-watch/. One stylesheet for all four, because they are the same page with a
	different board in it.

	Loaded as pageStyles: [tokens, news, chrome, tracker], so the palette arrives from
	tokens.css, the .wrap and the focus rule from news.css, and the masthead, sign-off,
	[data-tracker] colour map and award stage rail from chrome.css. This file styles only
	what a tracker page adds: its head, its board, and the seasonal runway on the award
	page.

	THE COLOURS ARE NOT HERE, same as the home bands. Each page carries data-tracker on its
	<main>, which lands on the map in chrome.css and points --band-accent at that tracker's
	hue. Every accent-inked rule below names --band-accent or --band-accent-text and nothing
	names a hue, so a page and the band it continues can never drift apart.

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

.tracker-main {
	padding-block-end: clamp(3rem, 7vw, 5.5rem);

	/* The page changes nothing about the ground under a focus ring, but it does change
	   the colour of everything else, so the ring follows the tracker like the band's. */
	--focus-ring: var(--band-accent-text);
}

/* Wider than the 44rem reading column the prose pages use, because a board is a table of
   dates rather than a paragraph, and the runway on the award page needs the room. */
.tracker-inner {
	max-width: 68rem;
	margin-inline: auto;
	padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* ---------------------------------------------------------------- the head */
/*
	The hub page's lockup with the band's colour in it: a small kicker naming what kind of
	page this is, the tracker's name at display scale, the band's own angle under it, and
	one mono line of counts. The kicker word is "Tracker" on all four, so the heading can
	be the tracker's name rather than repeating it.
*/

.tracker-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);
}

.tracker-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: '';
		width: 1.75rem;
		height: 3px;
		background-color: var(--band-accent);
	}
}

.tracker-title {
	margin-block-start: 0.75rem;
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 5.4vw, 3.6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--text);
	text-wrap: balance;
}

.tracker-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, and the one place on the page that says how big the board is. Tabular so a
   reader can compare two of these pages without the figures moving. */
.tracker-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);
	}
}

/* The line that sends a reader from a tracker to its reference pages, on the one tracker
   that has any. It matches .awards-crosslink in awards.css on purpose: the two pages point
   at each other, and a reader crossing between them should meet the same sentence shape and
   the same underlined link both ways. The accent comes from the page's own data-tracker, so
   the link is inked in the tracker's colour rather than the awards section's. */
.tracker-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 board */
/*
	What the tracker is watching, in date order, uncapped. The home band shows the first
	few rows of this and sends a reader here for the rest, so the row grammar is the band's:
	the item on the left, the dated line opposite it in mono, the tag the quietest thing in
	the row, and the band's colour living on the dates.

	A board with nothing in it renders one row saying so, in the same grammar. A tracker
	that has not been filed yet is a fact about the desk, and hiding the section would say
	nothing at all.
*/

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

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

.board-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);
}

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

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

.board-rows {
	margin-block-start: clamp(1.1rem, 2.2vw, 1.5rem);
	border-block-start: 1px solid var(--hairline-bright);
}

.board-row {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding-block: clamp(0.95rem, 1.7vw, 1.25rem);
	border-block-end: 1px solid var(--band-row-rule);
}

/* Marked in the data, marked in two channels here: an accent rule outside the text column
   so the row keeps the list's leading edge, and weight on the dated line. Never a wash
   behind type, which is the discipline the whole site runs on. */
.board-row-urgent {
	&::before {
		content: '';
		position: absolute;
		inset-block: clamp(0.95rem, 1.7vw, 1.25rem);
		inset-inline-start: -0.8rem;
		width: 3px;
		background-color: var(--band-accent);
	}

	.board-row-meta {
		font-weight: 700;
	}
}

.board-row-lede {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.7rem;
	row-gap: 0.15rem;
}

.board-row-primary {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}

.board-row-secondary {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--muted);
}

.board-row-when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.board-row-meta {
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--band-accent-text);
}

.board-row-tag {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* The quiet third line: where a row sits, and what the registry stored about the pattern
   behind a row that has no date yet. Parts are divided rather than punctuated, the same
   way the counts line above divides its figures. It sits under the lede at every width. */
.board-row-note {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.55rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--muted-2);
	max-width: 68ch;

	& span + span::before {
		content: '\00b7';
		margin-inline-end: 0.55rem;
	}
}

/* An empty board keeps the rules and drops the date column. */
.board-row-empty {
	.board-row-primary {
		font-weight: 400;
		color: var(--muted);
	}
}

/* ------------------------------------------------------------- the runway */
/*
	THE SEASONAL CALENDAR on /award-watch/: every tracked edition on one 12-month runway,
	the window opening two months behind today so the rule has ground on both sides of it.

	The grammar is the universe round's season runway (mockups/universe/v2), which is the
	reference implementation for this chart and stays frozen: a month axis over a ruled
	column of rows, one row per occasion, a name on the left, a countdown on the right, and
	a today rule crossing all of them.

	ONE THING IS DONE DIFFERENTLY, AND ON PURPOSE. The mock-up positions every bar from
	JavaScript, writing --x and --w onto each element. Here the geometry is worked out at
	build (scripts/util/build-award-season.js) and spent as SVG x and width attributes,
	which are markup rather than style. Two house rules meet at that decision: no inline
	styles, and a page carries no script of its own. What it buys is a chart that draws with
	JavaScript switched off, which matters more here than anywhere else on the site, because
	the runway is the page.

	The axis, the rows and the two overlays share one column template, so every percentage
	lands on the same track: percentages inside an SVG resolve against that SVG's own box,
	and all four SVGs sit in the middle column.
*/

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

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

/* Below the chart's own width the runway scrolls in here and the page never does. */
.season-scroller {
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

.season-chart {
	--name-col: 11.5rem;
	--count-col: 8.5rem;
	--col-gap: clamp(0.85rem, 1.6vw, 1.5rem);
	--track-height: 2.125rem;
	--today-rule: var(--accent);

	min-width: 46rem;
}

.season-axis,
.season-row,
.season-overlay {
	display: grid;
	grid-template-columns: var(--name-col) minmax(0, 1fr) var(--count-col);
	column-gap: var(--col-gap);
	align-items: center;
}

.season-axis {
	height: 1.5rem;
}

.season-axis-rail {
	grid-column: 2;
	display: block;
	width: 100%;
	height: 1.5rem;
	overflow: hidden;
}

.axis-month {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--muted-2);
}

.season-rows-wrap {
	position: relative;
}

/* Two overlays, because two things cross every row and they belong on opposite sides of
   the bars: the month gridlines sit behind them, and the today rule sits in front, where a
   reader can still find it over a filled window. */
.season-overlay {
	position: absolute;
	inset: 0;
	align-items: stretch;
	pointer-events: none;
}

.season-grid {
	z-index: 0;
}

.season-now {
	z-index: 2;
}

.season-overlay-rail {
	grid-column: 2;
	display: block;
	width: 100%;
	height: 100%;
}

.grid-line {
	fill: var(--hairline);
}

.today-rule {
	fill: var(--today-rule);
}

.season-rows {
	position: relative;
	z-index: 1;
}

/* Ruled from the top, so the last row leaves the section's own closing rule as the only
   one there instead of stacking a second against it. */
.season-row {
	border-block-start: 1px solid var(--hairline);
}

.season-name {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding-block: 0.4rem;
	font-size: 0.84rem;
	line-height: 1.25;
	color: var(--text);
}

.season-year {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--muted-2);
	font-variant-numeric: tabular-nums;
}

.season-track {
	grid-column: 2;
	display: block;
	width: 100%;
	height: var(--track-height);
}

.season-rail {
	fill: var(--hairline);
	opacity: 0.55;
}

/* A stage window: the stretch between one confirmed milestone and the next. */
.season-window {
	fill: color-mix(in srgb, var(--band-accent) 45%, transparent);
}

/* The ceremony itself, the one date on the row a reader is counting to. */
.season-tick {
	fill: var(--band-accent);
}

.season-countdown {
	grid-column: 3;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-align: end;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* A row whose date is behind us stops counting down and stops carrying weight. */
.season-row-behind {
	.season-countdown {
		color: var(--muted-2);
	}

	.season-tick {
		fill: color-mix(in srgb, var(--band-accent) 55%, transparent);
	}
}

/* ------------------------------------------------------------- the legend */

.season-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin-block-start: clamp(1rem, 2vw, 1.4rem);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--muted);

	& li {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
	}
}

/* The key carries the drawn shapes at their drawn weights, and it is the one place the
   colours are named, because the shapes alone are what the runway is read by. */
.legend-swatch {
	flex: none;

	&[data-legend='window'] {
		width: 1.6rem;
		height: 0.625rem;
		background-color: color-mix(in srgb, var(--band-accent) 45%, transparent);
	}

	&[data-legend='ceremony'] {
		width: 3px;
		height: 1.1rem;
		background-color: var(--band-accent);
	}

	&[data-legend='today'] {
		width: 2px;
		height: 1.35rem;
		background-color: var(--accent);
	}
}

/* ----------------------------------------------------------- the editions */
/*
	The ruled list under the runway: every edition the desk tracks, with the dates behind
	its bar written out. This is where the chart's shapes become sentences, and it is also
	the whole page for a reader whose browser draws no chart at all.

	A milestone with a confirmed date shows the date. A milestone without one shows the
	words somebody read off a page, and never a date, which is the rule the award tracker
	is built around.
*/

.edition {
	padding-block: clamp(1.1rem, 2vw, 1.5rem);
	border-block-end: 1px solid var(--band-row-rule);
}

.edition-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
	row-gap: 0.2rem;
}

.edition-name {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}

.edition-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-phase {
	margin-block-start: 0.35rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--muted);
}

.edition-dates {
	display: grid;
	gap: 0.3rem 1rem;
	margin-block-start: 0.75rem;

	& dt {
		font-family: var(--font-display);
		font-size: 0.7rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted-2);
	}

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

	/* A confirmed date is the only thing on this list set in the band's colour, so a
	   reader can see at a glance which rows are dates and which are words. */
	& dd.edition-date {
		font-family: var(--font-mono);
		font-size: 0.82rem;
		color: var(--band-accent-text);
		font-variant-numeric: tabular-nums;
	}
}

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

@media (min-width: 768px) {
	/* The board row goes two-column: what is being watched on the left, when it lands on
	   the right edge in mono, sharing a baseline rather than sitting under it. */
	.board-row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		column-gap: clamp(1.5rem, 4vw, 3rem);
	}

	.board-row-when {
		justify-content: flex-end;
		text-align: end;
	}

	.board-row-note {
		grid-column: 1 / -1;
	}

	.season-chart {
		--name-col: 14rem;
		--count-col: 9.5rem;
	}

	/* The dates list runs label and value on one line from here, which is what a list of
	   five milestones wants once there is room for it. */
	.edition-dates {
		grid-template-columns: 11rem minmax(0, 1fr);
		align-items: baseline;

		& dt {
			grid-column: 1;
		}

		& dd {
			grid-column: 2;
		}
	}
}