/*
 * SNCB-style departure screens. Every colour, size and spacing is a token
 * below, so the agency's brand pass is an edit to :root, not to the layout.
 *
 * Palette: sampled from SNCB's own Nov-2023 screen captures (NOTES.md has the
 * sources). Sizes are in --u, 1% of the height of a 16:9 screen (10.8 px at
 * 1080p), so the layout holds at any 16:9 resolution.
 *
 * Keep a band (or other non-background area) on every screen: TurtleOS
 * restarts a kiosk whose screenshot is ≥95% one colour for 30 min
 * (check-render.sh), and the bands are what keep an empty board well under.
 */

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: block;
	src: url(/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: block;
	src: url(/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* colours */
	--c-bg: #0f3054;
	--c-band: #006ab3;
	--c-text: #fff;
	--c-dest: #ffcc05;
	--c-alert: #eb2e2b;
	--c-box: #fff;
	--c-box-text: #0f3054;
	--c-rule: #c1c9d3;
	--c-muted: rgb(255 255 255 / 0.7);
	--c-stale: #ffb020;
	--c-sleep-bg: #000;
	--c-sleep-text: #444;

	/* type */
	--font: 'Figtree', system-ui, sans-serif;
	--w-bold: 700;
	--w-regular: 400;

	/* geometry */
	--u: min(1vh, 0.5625vw);
	/* The monitors sit in a frame that can cover a few mm of each edge.
	   Backgrounds bleed to the edge; content stays inside this margin. */
	--safe-x: 3vw;
	--safe-y: 3vh;
	--radius: calc(var(--u) * 0.6);

	/* platform screen */
	--p-time: calc(var(--u) * 11);
	--p-type: calc(var(--u) * 11);
	--p-dest: calc(var(--u) * 15);
	--p-dest-fit-1: calc(var(--u) * 11.5);
	--p-dest-fit-2: calc(var(--u) * 9.5);
	--p-text: calc(var(--u) * 4.8);
	--p-pill: calc(var(--u) * 6.5);
	--p-gap: calc(var(--u) * 2.5);
	--p-band-h: calc(var(--u) * 12);
	--p-band-text: calc(var(--u) * 5.2);
	--p-none-num: calc(var(--u) * 12);
	--p-none-text: calc(var(--u) * 6);

	/* full board */
	--board-rows: 12;
	--b-head-h: calc(var(--u) * 10);
	--b-head-text: calc(var(--u) * 5.6);
	--b-text: calc(var(--u) * 4.8);
	--b-rule: max(2px, calc(var(--u) * 0.18));
	--b-col-time: calc(var(--u) * 14.5);
	--b-col-status: calc(var(--u) * 34);
	--b-col-type: calc(var(--u) * 13);
	--b-col-platform: calc(var(--u) * 9);

	--stale-text: calc(var(--u) * 3);
	--sleep-text: calc(var(--u) * 3);
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font);
	font-weight: var(--w-regular);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

/* ---- shared ------------------------------------------------------------ */

.pill {
	display: inline-block;
	background: var(--c-alert);
	color: var(--c-text);
	font-weight: var(--w-bold);
	border-radius: var(--radius);
	padding: 0 0.3em;
	line-height: 1.25;
}

/* SNCB's delay tag points right, at the expected time. */
.pill--delay {
	padding-right: 0.55em;
	border-radius: var(--radius) 0 0 var(--radius);
	clip-path: polygon(0 0, calc(100% - 0.3em) 0, 100% 50%, calc(100% - 0.3em) 100%, 0 100%);
}

.box {
	display: inline-block;
	background: var(--c-box);
	color: var(--c-box-text);
	font-weight: var(--w-bold);
	border-radius: var(--radius);
	padding: 0 0.25em;
	line-height: 1.25;
}

.stale {
	font-size: var(--stale-text);
	font-weight: var(--w-regular);
	color: var(--c-stale);
	white-space: nowrap;
}

.stale::before {
	content: '';
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.05em;
}

/* ---- platform screen ----------------------------------------------------- */

.platform {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.platform__main {
	flex: 1;
	min-height: 0;
	padding: calc(var(--safe-y) + var(--u) * 2) var(--safe-x) var(--p-gap);
	display: flex;
	flex-direction: column;
	gap: var(--p-gap);
	overflow: hidden;
}

.platform__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--p-gap);
}

.platform__when {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 2);
	white-space: nowrap;
}

.platform__time {
	font-size: var(--p-time);
	font-weight: var(--w-bold);
	line-height: 1;
}

.platform__when .pill,
.platform__when .box {
	font-size: var(--p-pill);
}

.platform__type {
	font-size: var(--p-type);
	font-weight: var(--w-bold);
	line-height: 1;
	white-space: nowrap;
}

.platform__dest {
	font-size: var(--p-dest);
	font-weight: var(--w-bold);
	color: var(--c-dest);
	line-height: 1.05;
	white-space: nowrap;
	/* overflow: hidden is what lets the fit check measure a long name, but it
	   also clips at the line box: room for descenders (g, p, j) below it,
	   given back by the negative margin so the layout does not move. */
	overflow: hidden;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
}

.platform__dest.fit-1 {
	font-size: var(--p-dest-fit-1);
}

.platform__dest.fit-2 {
	font-size: var(--p-dest-fit-2);
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.platform__notice,
.platform__stops {
	font-size: var(--p-text);
	line-height: 1.3;
}

.platform__stops > :last-child {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.platform__notice:not(:has(:not([hidden]))) {
	display: none;
}

.platform__none {
	display: none;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: calc(var(--u) * 3);
	text-align: center;
	font-size: var(--p-none-text);
}

.platform__num {
	font-size: var(--p-none-num);
	font-weight: var(--w-bold);
	line-height: 1;
}

.platform[data-state='none'] .platform__none,
.platform[data-state='problem'] .platform__none {
	display: flex;
}

.platform[data-state='none'] :is(.platform__top, .platform__dest, .platform__notice, .platform__stops),
.platform[data-state='problem'] :is(.platform__top, .platform__notice, .platform__stops) {
	display: none;
}

.band {
	flex: none;
	height: calc(var(--p-band-h) + var(--safe-y));
	padding: 0 var(--safe-x) var(--safe-y);
	background: var(--c-band);
	font-size: var(--p-band-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--p-gap);
	white-space: nowrap;
}

.band__next {
	display: flex;
	align-items: center;
	gap: 0.35em;
	min-width: 0;
	overflow: hidden;
}

.band__dest {
	color: var(--c-dest);
	font-weight: var(--w-bold);
	overflow: hidden;
	text-overflow: ellipsis;
}

.band__side {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.band__platform {
	background: var(--c-box);
	color: var(--c-box-text);
	font-weight: var(--w-bold);
	border-radius: var(--radius);
	min-width: 1.5em;
	padding: 0 0.2em;
	text-align: center;
	line-height: 1.3;
}

/* ---- full board ------------------------------------------------------------ */

.board {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.board__head {
	flex: none;
	height: calc(var(--b-head-h) + var(--safe-y));
	padding: var(--safe-y) var(--safe-x) 0;
	background: var(--c-band);
	font-size: var(--b-head-text);
	font-weight: var(--w-bold);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	white-space: nowrap;
}

.board__heading {
	text-align: center;
}

.board__side {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.8em;
	font-size: calc(var(--b-head-text) * 0.75);
	font-weight: var(--w-regular);
}

.board__rows {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--safe-y);
	flex: 1;
	min-height: 0;
	display: grid;
	grid-auto-rows: calc((100vh - var(--b-head-h) - 2 * var(--safe-y)) / var(--board-rows));
	align-content: start;
}

.row {
	display: grid;
	grid-template-columns: var(--b-col-time) var(--b-col-status) 1fr var(--b-col-type) var(--b-col-platform);
	column-gap: calc(var(--u) * 1.2);
	align-items: center;
	padding: 0 var(--safe-x);
	border-bottom: var(--b-rule) solid var(--c-rule);
	font-size: var(--b-text);
	white-space: nowrap;
}

.row__time,
.row__type,
.row__platform {
	font-weight: var(--w-bold);
}

.row__status {
	display: flex;
	align-items: center;
	gap: 0.25em;
}

/* Fixed width (fits "+99'"), so the expected-time box starts at the same
   x on every row instead of following the delay's digit count. */
.row__status .pill--delay {
	min-width: 3.4em;
	text-align: center;
}

.row__dest {
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 1em;
}

.row__dest b {
	color: var(--c-dest);
	font-weight: var(--w-bold);
}

.row__platform {
	justify-self: end;
	text-align: center;
	min-width: 1.6em;
	border-radius: var(--radius);
	line-height: 1.25;
}

.board__none {
	position: absolute;
	inset: calc(var(--b-head-h) + var(--safe-y)) var(--safe-x) var(--safe-y);
	display: grid;
	place-items: center;
	font-size: var(--p-none-text);
}

/* Platform change: the number in an inverted box (as on SNCB's boards). */
.row.is-changed .row__platform {
	background: var(--c-box);
	color: var(--c-box-text);
}

/* ---- sleep ----------------------------------------------------------------- */

.sleep {
	position: fixed;
	inset: 0;
	background: var(--c-sleep-bg);
	display: grid;
	place-items: center;
}

.sleep__msg {
	color: var(--c-sleep-text);
	font-size: var(--sleep-text);
	transition: transform 4s ease-in-out;
}