/* Værstasjon Live – juster fargene her for å tilpasse temaet */
.vsl {
	--vsl-box: #e8e8e8;       /* bakgrunn i boksene */
	--vsl-gap: 2px;           /* avstand mellom boksene (sidens bakgrunn vises her) */
	--vsl-fg: #6b6b6b;        /* tall */
	--vsl-label: #7a7a7a;     /* overskrifter */
	--vsl-ring: #cfcfcf;      /* sirkelen rundt vind */
	--vsl-accent: #1e88e5;    /* prikken som viser vindretning */
	box-sizing: border-box;
	color: var(--vsl-fg);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.vsl *, .vsl *::before, .vsl *::after { box-sizing: inherit; }

/* Overskriften arver størrelse og font fra temaets h2 */
.vsl .vsl__title { margin: 0 0 .25rem; text-align: center; }
.vsl .vsl__updated { margin: 0 0 1rem; font-size: 1rem; font-style: italic; text-align: center; color: var(--vsl-label); }
.vsl__stale { color: #d97706; }

/* 3 bokser per rad; en ufullstendig siste rad midtstilles (3 + 2) */
.vsl__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vsl-gap, 2px);
}
.vsl__row > .vsl__box { flex: 0 0 calc((100% - 2 * var(--vsl-gap, 2px)) / 3); min-width: 0; }

.vsl__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 2rem 1rem;
	background: var(--vsl-box);
	text-align: center;
}

.vsl__label {
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--vsl-label);
}
.vsl__label b { font-weight: 700; }
.vsl__label b.vsl__nc { text-transform: none; }

.vsl__value {
	margin: .15rem 0 .2rem;
	font-size: 3.1rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.vsl__value sup { font-size: .45em; font-weight: 400; vertical-align: top; position: relative; top: .1em; }

.vsl__sub { font-size: .85rem; color: var(--vsl-label); }

/* Vind: sirkel med prikk for retning */
.vsl__box--wind .vsl__label,
.vsl__box--wind .vsl__value,
.vsl__box--wind .vsl__sub { position: relative; z-index: 1; }
/* Ren CSS (ikke SVG), så temaer/optimaliserings-plugins ikke skjuler den */
.vsl .vsl__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 175px;
	height: 175px;
	margin: -87.5px 0 0 -87.5px;
	border: 3px solid var(--vsl-ring);
	border-radius: 50%;
	pointer-events: none;
}
.vsl .vsl__needle {
	position: absolute;
	inset: -3px;
	display: block;
	transform-origin: 50% 50%;
}
.vsl .vsl__pin {
	position: absolute;
	top: -6px;
	left: 50%;
	display: block;
	width: 15px;
	height: 15px;
	margin-left: -7.5px;
	border-radius: 50%;
	background: var(--vsl-accent);
}
.vsl--error { color: var(--vsl-label); font-style: italic; }

@media (max-width: 560px) {
	.vsl__row > .vsl__box { flex-basis: calc((100% - var(--vsl-gap, 2px)) / 2); }
	.vsl__row > .vsl__box:last-child:nth-child(odd) { flex-basis: 100%; }
}
@media (max-width: 420px) {
	.vsl__box { min-height: 170px; padding: 1.5rem .5rem; }
	.vsl__value { font-size: 2.4rem; }
	.vsl__label { font-size: .8rem; }
	.vsl .vsl__ring { width: 145px; height: 145px; margin: -72.5px 0 0 -72.5px; }
	.vsl__box--wind .vsl__sub { font-size: .72rem; }
}