/*
 * La franja de carrera en directo.
 *
 * Vive en el plugin y no en el CSS compilado del tema porque la barra es del
 * plugin: la pintan las mismas lineas que leen los eventos. Se encola solo
 * cuando hay una sesion que anunciar, asi que en una web sin carrera no llega
 * a pedirse.
 */

/*
 * Esta linea es obligatoria, no una precaucion.
 *
 * display: flex below beats the browser's own display: none for [hidden],
 * so without this the strip would sit there announcing a race that is not
 * running until the script got round to it - and for ever if the script
 * never ran at all.
 */
.nox-live[hidden] {
	display: none;
}

:root {
	--nox-live-height: 3.5rem;
}

.nox-live {
	/*
	 * Pegada arriba, y la cabecera debajo.
	 *
	 * Left in the normal flow it scrolled away like anything else, which
	 * is the one thing a live notice must not do - the race is still on
	 * whether or not you have reached the bottom of the page.
	 */
	position: sticky;
	inset-block-start: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-block-size: var(--nox-live-height);
	padding: 0.7rem 1.1rem 0.8rem;
	background: var(--ref--colors--live-red, #c1121f);
	color: var(--ref--colors--aero-white, #f4f7f8);
	font-family: var(--font--family--subheader, var(--font-family--mono), ui-monospace, monospace);
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

/*
 * El tema ya expone donde se pega su cabecera. Se le dice que se pegue
 * bajo la barra en vez de encima, y no hay que tocar el tema ni medir
 * nada con JavaScript.
 */
/*
 * Dos variables y no una, y hay motivo.
 *
 * --nox-live-height is what the strip is told to be; --nox-live-offset is what
 * the script measures it actually is, and it is the second one the header sits
 * under. Feeding the measurement back into the strip's own min-block-size made
 * it grow on every observation - measured, therefore taller, therefore measured
 * again. It reached 1879px before it was caught.
 */
body:has(.nox-live:not([hidden])) .site-header {
	--_header-top: var(--nox-live-offset, var(--nox-live-height));
}

/*
 * El rail del coche baja lo mismo que la cabecera.
 *
 * The rail is fixed from the very top of the window and the car starts 12.5rem
 * down it, which clears a 174px header by 26px - not much. Push the header down
 * by the strip and that 26px becomes -30px: the car parks behind the header and
 * only its roof shows.
 *
 * Moving the rail's own top by the same amount restores the clearance exactly,
 * and the car's position is measured from the rail, so everything below follows
 * without a single number being repeated here. The script recalculates on its
 * own: it watches the document for size changes, and showing the strip is one.
 */
body:has(.nox-live:not([hidden])) .scroll-rail {
	inset-block-start: var(--nox-live-offset, var(--nox-live-height));
}

.nox-live__tag {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.nox-live__copy {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/*
 * Nada de texto fino sobre rojo.
 *
 * Light type on a saturated colour reads thinner than it is - the eye
 * loses the strokes against the background. Everything here is heavy on
 * purpose, and nothing is dimmed below what stays comfortably readable.
 */
.nox-live__race {
	display: block;
	overflow: hidden;
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.045em;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nox-live__meta {
	display: block;
	margin-block-start: 0.12rem;
	overflow: hidden;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.82;
}

/*
 * El reloj escribe con la misma letra que el resto de la franja.
 *
 * It had a monospace stack of its own, which on a bar built out of the site's
 * own subheader face made the one number anybody actually reads look like it
 * had been pasted in from somewhere else. Same family, same size, same weight,
 * same spacing as the line underneath the race name.
 *
 * tabular-nums is the one thing kept from the old stack: the digits change
 * every second, and without it a 1 is narrower than a 7 and the whole bar
 * twitches on every tick.
 */
.nox-live__clock {
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
}

/* El unico enlace de la franja, y por eso tiene forma de boton. */
.nox-live__cta {
	flex: 0 0 auto;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 999px;
	color: inherit;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.nox-live__cta:is(:hover, :focus-visible) {
	border-color: var(--ref--colors--aero-white, #f4f7f8);
	background: var(--ref--colors--aero-white, #f4f7f8);
	color: var(--ref--colors--live-red, #c1121f);
}

.nox-live__bar {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 3px;
	background: rgb(0 0 0 / 30%);
}

.nox-live__bar i {
	display: block;
	inline-size: 0;
	block-size: 100%;
	background: rgb(255 255 255 / 88%);
	transition: inline-size 1s linear;
}

/*
 * El punto no parpadea: emite. Un anillo sale de el y se desvanece, como
 * el barrido de un radar - aguanta mucho mejor mirarlo diez minutos que un
 * parpadeo, y solo mueve opacidad y escala, que el navegador compone sin
 * repintar nada.
 */
.nox-live__ping {
	position: relative;
	flex: 0 0 auto;
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: currentcolor;
}

.nox-live__ping::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px currentcolor;
	animation: nox-live-ping 1.8s cubic-bezier(0, 0.55, 0.45, 1) infinite;
}

@keyframes nox-live-ping {

	0% {
		opacity: 0.9;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(3.4);
	}
}

@media (max-width: 48rem) {

	:root {
		--nox-live-height: 3.2rem;
	}

	.nox-live {
		gap: 0.6rem;
		padding-inline: 0.85rem;
	}

	.nox-live__race {
		font-size: 0.82rem;
	}

	.nox-live__meta,
	.nox-live__clock {
		font-size: 0.64rem;
	}

	/*
	 * En un movil no cabe todo. Lo que se va es la palabra Live - el punto
	 * rojo latiendo ya lo dice - y el reloj. Lo que se queda es el nombre
	 * de la carrera y el boton, que es lo unico con lo que se puede hacer
	 * algo.
	 */
	.nox-live__tag {
		font-size: 0;
		gap: 0;
	}

	.nox-live__clock {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nox-live__ping::after {
		animation: none;
	}

	.nox-live__bar i {
		transition: none;
	}
}