/**
 * Block muduex/tiempo, section «Próximas 24 horas»: summary, strip, curve, «now» mark and buttons. Task 8.
 *
 * Only this section's classes. Colours come from the --tiempo-* variables of
 * tiempo.css and the fixed colours of the spec; every state shown only by
 * colour has its rule inside @media (forced-colors: active).
 */

/* ---- Summary --------------------------------------------------------- */

.muduex-horas p.muduex-horas__resumen {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	line-height: 1.45;
}

.muduex-horas [hidden] {
	display: none !important;
}

/* ---- The strip: a scroll box with the curve layer under the list ------ */

/* Every item is 5rem wide and its rows have fixed heights, so the curve
   band (row 4) sits at the same height in all of them: 0.5rem of padding,
   then 1.5rem (hour), 2.75rem (icon) and 1.75rem (temperature). */
.muduex-horas {
	--horas-casilla: 5rem;
	--horas-curva-top: 6.5rem;
	--horas-curva-alto: 3rem;
}

.muduex-horas__tira {
	position: relative;
	display: grid;
	grid-auto-columns: max-content;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	border-radius: 12px;
	--horas-borde: 2.5rem;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--horas-borde)), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--horas-borde)), transparent);
}

/* The right-edge fade says there is more; it goes at the end. Without JS
   a scroll-driven timeline does it where supported; tiempo.js adds
   .is-final everywhere (and when the strip fits). Not motion: the fade
   follows the scroll position. */
@property --horas-borde {
	syntax: "<length>";
	inherits: false;
	initial-value: 2.5rem;
}

@supports (animation-timeline: scroll()) {

	.muduex-horas__tira {
		animation: muduex-horas-borde linear both;
		animation-timeline: scroll(self inline);
	}
}

@keyframes muduex-horas-borde {

	0%,
	96% {
		--horas-borde: 2.5rem;
	}

	100% {
		--horas-borde: 0px;
	}
}

.muduex-horas__tira.is-final,
.muduex-horas__tira:focus-visible {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Full width and scrolling: the ring goes inwards (Global Constraints).
   One class more than tiempo.css's ring, so it wins by specificity. */
.muduex-tiempo.muduex-cielo .muduex-horas .muduex-horas__tira:focus-visible {
	outline-offset: calc(var(--tiempo-foco-ancho) * -1);
	box-shadow: inset 0 0 0 calc(var(--tiempo-foco-ancho) + 5px) rgba(0, 0, 0, 0.55);
}

.muduex-horas__lienzo,
.muduex-horas__lista {
	grid-area: 1 / 1;
}

.muduex-horas__lienzo {
	position: relative;
	overflow: clip;
	pointer-events: none;
}

.muduex-horas__curva {
	position: absolute;
	top: var(--horas-curva-top);
	left: 0;
	width: calc(var(--casillas, 24) * var(--horas-casilla));
	height: var(--horas-curva-alto);
	overflow: visible;
	transform: translateX(calc(var(--desplaza, 0) * var(--horas-casilla) * -1));
}

.muduex-horas__curva path {
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* «Now»: a line in the running hour, at the fraction already gone. */
.muduex-horas__marca {
	position: absolute;
	top: 2rem; /* under the hour label */
	bottom: 0.25rem;
	left: calc(var(--marca, 0) * var(--horas-casilla) - 1px);
	width: 2px;
	border-radius: 1px;
	background-color: #fff;
}

.muduex-horas__lista {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- One item -------------------------------------------------------- */

.muduex-horas__lista > li {
	display: grid;
	flex: 0 0 var(--horas-casilla);
	grid-template-rows: 1.5rem 2.75rem 1.75rem var(--horas-curva-alto) 3.5rem 1.5rem 1.5rem;
	justify-items: center;
	align-items: center;
	box-sizing: border-box;
	width: var(--horas-casilla);
	padding: 0.5rem 0.125rem;
	border-radius: 12px;
	text-align: center;
	scroll-snap-align: start;
	font-variant-numeric: tabular-nums;
}

.muduex-horas__lista > li[aria-current="time"] {
	background-color: rgba(255, 255, 255, 0.12);
}

.muduex-hora__h {
	grid-row: 1;
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
}

.muduex-hora__icono {
	grid-row: 2;
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
}

.muduex-hora__icono svg {
	width: 100%;
	height: 100%;
}

.muduex-hora__t {
	grid-row: 3;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.75rem;
}

/* Rain: the bar (full at 4 mm) on a 2rem floor, and its amount, at 18 px:
   it is not in the closed list of 16 px labels (Global Constraints). */
.muduex-hora__lluvia {
	grid-row: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	align-self: stretch;
	font-size: 1.125rem;
	font-weight: 700;
}

.muduex-hora__barra {
	display: block;
	width: 1.25rem;
	height: calc(var(--lluvia, 0) * 2rem);
	min-height: 2px;
	margin-bottom: 0.125rem;
	border-radius: 3px 3px 0 0;
	background-color: #9ee0ff;
	transform-origin: 50% 100%;
}

.muduex-hora__barra--nieve {
	background-color: #fff;
}

.muduex-hora__prob {
	grid-row: 6;
	font-size: 1rem;
}

.muduex-hora__viento {
	grid-row: 7;
	display: flex;
	align-items: center;
	gap: 0.125rem;
	font-size: 1rem;
}

.muduex-hora__flecha {
	flex: none;
	transform: rotate(var(--rumbo, 0deg));
}

.muduex-hora--sol .muduex-hora__h {
	font-weight: 400;
}

/* ---- Buttons (tiempo.js, from 40rem) --------------------------------- */

.muduex-horas__marco.tiene-botones {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	align-items: center;
	gap: 0.5rem;
}

.muduex-horas__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	min-height: 3rem; /* «main button» asks 50px */
	padding: 0;
	line-height: 1;
	border: 1px solid var(--tiempo-trazo);
	border-radius: 50%;
	background-color: var(--tiempo-vidrio);
	color: var(--tiempo-texto);
	font-size: 1.75rem;
	cursor: pointer;
}

.muduex-horas__boton[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
}

/* ---- Entrances: the curve draws itself, the bars grow in steps -------- */

@media (prefers-reduced-motion: no-preference) {

	.muduex-js .muduex-horas__curva path[data-entra] {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	.muduex-js .muduex-horas__curva path.is-entrada {
		animation: muduex-horas-traza 1.2s ease-out forwards;
	}

	.muduex-js .muduex-hora__barra[data-entra] {
		transform: scaleY(0);
	}

	.muduex-js .muduex-hora__barra.is-entrada {
		animation: muduex-horas-crece 0.5s ease-out calc(min(var(--i, 0), 23) * 20ms) forwards;
	}

	.muduex-horas__tira {
		scroll-behavior: smooth;
	}
}

@keyframes muduex-horas-traza {

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes muduex-horas-crece {

	to {
		transform: scaleY(1);
	}
}

/* ---- Forced colours: what only colour shows -------------------------- */

@media (forced-colors: active) {

	.muduex-horas__marca,
	.muduex-hora__barra {
		forced-color-adjust: none;
		background-color: Highlight;
	}

	.muduex-horas__curva path {
		stroke: CanvasText;
	}

	.muduex-horas__lista > li[aria-current="time"] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	.muduex-horas__boton {
		border-color: ButtonText;
	}

	.muduex-horas__boton[aria-disabled="true"] {
		border-color: GrayText;
		color: GrayText;
	}
}

/* ---- Print: a grid of text, no curve and no scrolling ----------------- */

@media print {

	.muduex-horas__marco.tiene-botones,
	.muduex-horas__tira {
		display: block;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.muduex-horas__lienzo,
	.muduex-horas__boton,
	.muduex-hora__icono,
	.muduex-hora__flecha {
		display: none !important;
	}

	.muduex-horas__lista {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2pt;
	}

	.muduex-horas__lista > li {
		display: flex;
		flex-direction: column;
		width: auto;
		padding: 2pt;
		border: 1pt solid #000;
		border-radius: 0;
		color: #000;
		text-align: start;
		break-inside: avoid;
	}

	.muduex-horas__lista > li[aria-current="time"] {
		background: none;
		font-weight: 700;
	}

	/* The sentence says it all (sky and wind included), not the pieces. */
	.muduex-horas__lista > li > [aria-hidden="true"] {
		display: none !important;
	}

	.muduex-horas__lista .screen-reader-text {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		white-space: normal !important;
		word-wrap: normal !important;
	}
}