/* Logical properties throughout so RTL (Dhivehi) works without extra CSS. */
.naba-map, .naba-video { margin-block: 1.5rem; }
.naba-map__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: .5rem; }
.naba-map__controls button {
	padding: .4rem .8rem; border: 1px solid #0b1d33; background: #fff; color: #0b1d33;
	border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem;
}
.naba-map__controls button[aria-pressed="true"] { background: #0b1d33; color: #fff; }
.naba-map__canvas { width: 100%; background: #0b1d33; border-radius: 6px; z-index: 0; }
.naba-map__timebar { display: flex; align-items: center; gap: .75rem; margin-block-start: .5rem; }
.naba-map__timebar button {
	inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 0;
	background: #0b1d33; color: #fff; cursor: pointer;
}
.naba-map__slider { flex: 1; min-inline-size: 0; }
.naba-map__date { font-variant-numeric: tabular-nums; min-inline-size: 6.5rem; text-align: end; }
.naba-map__legend {
	display: flex; justify-content: space-between; font-size: .75rem; margin-block-start: .5rem;
	padding: .25rem .5rem; border-radius: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.naba-map__legend:empty { display: none; }
.naba-map__legend--sst_anomaly { background: linear-gradient(to right, #3b4cc0, #9ab8f5, #bdbdbd, #f4a582, #b2182b); }
.naba-map__legend--rain { background: linear-gradient(to right, #9ecae1, #3182bd, #08306b); }
.naba-map__caption { font-size: .8rem; opacity: .75; margin-block-start: .5rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.naba-video__frame { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; border-radius: 6px; }
.naba-video__facade {
	position: relative; padding: 0; cursor: pointer;
	background-size: cover; background-position: center;
}
.naba-video__play {
	position: absolute; inset: 0; margin: auto; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%;
	background: rgba(0,0,0,.65);
}
.naba-video__play::after {
	content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0; block-size: 0;
	border-block: .9rem solid transparent; border-inline-start: 1.4rem solid #fff; translate: .15rem 0;
}
.naba-video figcaption { font-size: .85rem; opacity: .75; margin-block-start: .5rem; }
.naba-map-placeholder { padding: 1rem; border: 1px dashed #888; border-radius: 6px; background: #f6f7f7; }