/*
 * Skyrocket Radio Weather 4.x — one stylesheet for every block and widget.
 *
 * Tokens live on .srrwx and can be overridden per site (Weather Options → Design prints
 * them inline) or per instance. Layout responds to the space a display is placed in —
 * container queries on .srrwx-cq — so the same block works in a full-width row, a
 * half column or a sidebar.
 */

/* ---------- Tokens ---------- */
.srrwx {
	--srrwx-accent: #157d82;
	--srrwx-tint: #eef5f4;
	--srrwx-ink: #1c2f36;
	--srrwx-muted: #56696f;
	--srrwx-line: #dce5e6;
	--srrwx-surface: #fff;
	--srrwx-radius: 14px;
	--srrwx-overlay: .45;
	--srrwx-inner-radius: max(4px, calc(var(--srrwx-radius) - 4px));
	--srrwx-strip: 0 0 0;
	--srrwx-alert-head: #fff;
	--srrwx-alert-head-bg: #b3261e;
	--srrwx-alert-fg: #1f1f1f;
	--srrwx-alert-bg: #fff6f4;

	box-sizing: border-box;
	max-width: 100%;
	color: var(--srrwx-ink);
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.srrwx { --srrwx-tint: color-mix(in srgb, var(--srrwx-accent) 8%, #fff); }
}
.srrwx-cq { container-type: inline-size; width: 100%; }

/* Light text, lines and surfaces for rows with a dark background ("White" icon option). */
.srrwx--on-dark {
	--srrwx-ink: #fff;
	--srrwx-muted: rgb(255 255 255 / .78);
	--srrwx-line: rgb(255 255 255 / .22);
	--srrwx-surface: transparent;
	--srrwx-tint: rgb(255 255 255 / .1);
}

/* ---------- Base ---------- */
.srrwx *, .srrwx *::before, .srrwx *::after { box-sizing: border-box; }
.srrwx p, .srrwx dl, .srrwx dd, .srrwx h4 { margin: 0; }
.srrwx ul, .srrwx ol { list-style: none; margin: 0; padding: 0; }
.srrwx li { margin: 0; }
.srrwx li:not(.srrwx-photo)::before, .srrwx li::marker { content: none; }
.srrwx img { max-width: 100%; }
.srrwx a { color: inherit; }
.srrwx :focus-visible { outline: 3px solid var(--srrwx-accent); outline-offset: 2px; border-radius: 4px; }
.srrwx summary { cursor: pointer; list-style: none; }
.srrwx summary::-webkit-details-marker { display: none; }
.srrwx-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Condition artwork is applied as a mask so it takes the surrounding text colour. */
.srrwx-icon {
	display: inline-block;
	flex: none;
	width: var(--srrwx-s, 40px);
	height: var(--srrwx-s, 40px);
	background: currentColor;
	-webkit-mask: var(--srrwx-i) center / contain no-repeat;
	mask: var(--srrwx-i) center / contain no-repeat;
	vertical-align: middle;
}
@media (forced-colors: active) {
	.srrwx-icon { background: CanvasText; forced-color-adjust: none; }
}
.srrwx-ui {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -.125em;
}

.srrwx-eyebrow {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--srrwx-muted);
}

/* ---------- Cards ---------- */
.srrwx-card {
	background: var(--srrwx-surface);
	border: 1px solid var(--srrwx-line);
	border-radius: var(--srrwx-radius);
	padding: 16px;
}
@container (min-width: 520px) { .srrwx-card { padding: 20px 22px; } }
.srrwx-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px !important;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--srrwx-ink);
}
.srrwx-card__title .srrwx-ui { color: var(--srrwx-accent); font-size: 1.1em; }
.srrwx--on-dark .srrwx-card__title .srrwx-ui { color: inherit; }

/* A frame groups a card with its banner ad and sponsor line. */
.srrwx-frame {
	border-radius: var(--srrwx-radius);
	overflow: hidden;
	background: var(--srrwx-surface);
}
.srrwx-frame:has(> .wx-banner-ad, > .srrwx-sponsor, > .srrwx-radar-img) { border: 1px solid var(--srrwx-line); }
.srrwx-frame > .wx-banner-ad { margin: 0; padding: 10px; text-align: center; }

/* ---------- Photo surfaces (condition image + overlay) ---------- */
.srrwx-photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: #34454c;
	text-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.srrwx-photo > .srrwx-photo__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}
.srrwx-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(170deg, rgb(0 0 0 / calc(var(--srrwx-overlay) * .55)) 0%, rgb(0 0 0 / var(--srrwx-overlay)) 100%);
}
.srrwx-photo .srrwx-eyebrow { color: rgb(255 255 255 / .88); }
/* "Black" icon option: very light custom photos read better with a light wash and dark text. */
.srrwx-photo--light { color: var(--srrwx-ink); text-shadow: none; }
.srrwx-photo--light::before { background: linear-gradient(170deg, rgb(255 255 255 / calc(var(--srrwx-overlay) * .6)), rgb(255 255 255 / var(--srrwx-overlay))); }
.srrwx-photo--light .srrwx-eyebrow { color: var(--srrwx-muted); }

.srrwx-glass {
	background: rgb(255 255 255 / .14);
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: var(--srrwx-inner-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srrwx-photo--light .srrwx-glass { background: rgb(255 255 255 / .55); border-color: rgb(0 0 0 / .08); }

/* Stretched link: the whole card follows the link. */
.srrwx-stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.srrwx-stretch:focus-visible { outline: none; }
.srrwx-stretch:focus-visible::after { outline: 3px solid #fff; outline-offset: -4px; border-radius: inherit; }
.srrwx-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: .85rem;
	font-weight: 650;
	text-decoration: none !important;
	color: inherit !important;
}
.srrwx-more .srrwx-ui { transition: transform .2s ease; }
.srrwx-photo:hover .srrwx-more .srrwx-ui { transform: translateX(3px); }

/* ---------- Current observation (shared) ---------- */
.srrwx-now { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.srrwx-now__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.srrwx-now__meta .srrwx-ui { margin-right: 4px; }
.srrwx-now__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.srrwx-now__reading { display: inline-flex; align-items: center; gap: 12px; }
.srrwx-now__temp {
	font-size: clamp(2.75rem, 14cqi, 4.5rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.srrwx-now__cond { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.srrwx-now__cond strong { font-size: 1.1rem; font-weight: 650; }
.srrwx-now__cond span { font-size: .85rem; opacity: .9; }
.srrwx-note { font-size: .8rem; opacity: .9; }

.srrwx-mini {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 4px 14px;
	margin-top: 8px !important;
	font-size: .8rem;
	line-height: 1.35;
}
.srrwx-mini > div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgb(255 255 255 / .18); }
.srrwx-mini dt { font-weight: 400; opacity: .85; }
.srrwx-mini dd { font-weight: 650; text-align: right; }

/* ---------- Current conditions block ---------- */
.srrwx-current--spaced { margin-top: 15px; }
.srrwx-hero {
	display: grid;
	gap: 18px;
	padding: 18px;
	border-radius: var(--srrwx-radius);
}
@container (min-width: 520px) { .srrwx-hero { padding: 24px 26px; } }
/* Current reading centred and stacked: icon + temperature, then the condition below. */
.srrwx-hero > .srrwx-now { align-items: center; text-align: center; }
.srrwx-hero .srrwx-now__meta { justify-content: center; }
.srrwx-hero .srrwx-now__main { flex-direction: column; gap: 4px; }
.srrwx-hero .srrwx-now__reading { gap: 14px; }
.srrwx-hero .srrwx-now__temp { font-size: clamp(3.5rem, 17cqi, 5.75rem); }
.srrwx-hero .srrwx-now__cond { align-items: center; }
.srrwx-hero .srrwx-now__cond strong { font-size: 1.3rem; }
.srrwx-hero .srrwx-now__cond span { font-size: .95rem; }
.srrwx-hero .srrwx-mini { align-self: stretch; text-align: left; }
@container (max-width: 459px) { .srrwx-hero .srrwx-now__reading .srrwx-icon { --srrwx-s: 72px !important; } }
/* Wide: the reading keeps a compact column and the forecast cards take the rest. */
@container (min-width: 760px) {
	.srrwx-hero { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr); align-items: stretch; gap: 24px; }
	.srrwx-hero > .srrwx-now { justify-content: center; }
	.srrwx-hero .srrwx-now__temp { font-size: clamp(3.75rem, 8cqi, 5.75rem); }
	.srrwx-periods { align-items: stretch; }
	.srrwx-period { justify-content: center; padding: 16px 12px; }
	.srrwx-period__text { font-size: .85rem; }
}

.srrwx-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.srrwx-period {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 12px 8px;
	text-align: center;
}
.srrwx-period__name { font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.srrwx-period__temp { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.srrwx-period__temp small { display: block; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.srrwx-period__text { font-size: .78rem; line-height: 1.35; opacity: .92; }
.srrwx-period__rain { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; }
/* Narrow: periods become compact rows. */
@container (max-width: 459px) {
	.srrwx-periods { grid-template-columns: 1fr; gap: 6px; }
	.srrwx-period {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto auto;
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		text-align: left;
	}
	.srrwx-period .srrwx-icon { --srrwx-s: 32px !important; }
	.srrwx-period__temp { font-size: 1.15rem; }
	.srrwx-period__temp small { display: none; }
	.srrwx-period__text { display: none; }
}



.srrwx-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--srrwx-surface);
	border: 1px solid var(--srrwx-line);
	border-top: 0;
	border-radius: 0 0 var(--srrwx-radius) var(--srrwx-radius);
	overflow: hidden;
}
.srrwx-tile {
	min-width: 0;
	margin: 0 -1px -1px 0;
	padding: 14px 16px;
	border-right: 1px solid var(--srrwx-line);
	border-bottom: 1px solid var(--srrwx-line);
}
.srrwx-tile dt {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--srrwx-muted);
}
.srrwx-tile dd {
	margin-top: 4px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.srrwx-tile dd small {
	display: block;
	margin-top: 3px;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--srrwx-muted);
}
@container (max-width: 459px) {
	.srrwx-tiles { grid-template-columns: 1fr 1fr; }
	.srrwx-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.srrwx-tile { padding: 12px; }
	.srrwx-tile dd { font-size: 1.1rem; }
}

.srrwx-adblock { margin-top: 12px; text-align: center; }

/* ---------- 7-day ---------- */
.srrwx-day { border-top: 1px solid var(--srrwx-line); }
.srrwx-day:first-child { border-top: 0; }
.srrwx-day__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto 16px;
	grid-template-areas: "name icon temps chev";
	align-items: center;
	gap: 10px;
	padding: 10px 2px;
	border-radius: 8px;
}
.srrwx-day__row:hover { background: var(--srrwx-tint); }
.srrwx-day__name { grid-area: name; font-weight: 700; line-height: 1.25; min-width: 0; }
.srrwx-day__name small { display: block; font-size: .75rem; font-weight: 400; color: var(--srrwx-muted); }
.srrwx-day__row > .srrwx-icon { grid-area: icon; }
.srrwx-day__cond, .srrwx-day__rain, .srrwx-day__wind { display: none; font-size: .88rem; }
.srrwx-day__rain { align-items: center; gap: 4px; color: var(--srrwx-muted); }
.srrwx-day__rain .srrwx-ui { color: var(--srrwx-accent); }
.srrwx--on-dark .srrwx-day__rain .srrwx-ui { color: inherit; }
.srrwx-day__wind { color: var(--srrwx-muted); white-space: nowrap; }
.srrwx-day__temps { grid-area: temps; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srrwx-day__temps strong { font-size: 1.05rem; }
.srrwx-day__lo { color: var(--srrwx-muted); }
.srrwx-day__temps strong::after { content: " /"; font-weight: 400; color: var(--srrwx-muted); }
.srrwx-range { display: none; position: relative; width: 100%; min-width: 60px; height: 6px; border-radius: 3px; background: var(--srrwx-line); }
.srrwx-range > span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--lo, 0%);
	right: calc(100% - var(--hi, 100%));
	min-width: 6px;
	border-radius: 3px;
	background: var(--srrwx-accent);
	background: linear-gradient(90deg, color-mix(in srgb, var(--srrwx-accent) 55%, #fff), var(--srrwx-accent));
}
.srrwx--on-dark .srrwx-range > span { background: #fff; }
.srrwx-day__row > .srrwx-ui { grid-area: chev; color: var(--srrwx-muted); transition: transform .2s ease; }
.srrwx-day details[open] .srrwx-day__row > .srrwx-ui { transform: rotate(180deg); }
.srrwx-day__body { display: grid; gap: 8px; padding: 2px 2px 14px; font-size: .9rem; line-height: 1.55; }
.srrwx-day__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8rem; color: var(--srrwx-muted); }
/* Rain and wind have their own columns only on wide layouts; narrower ones list them here. */
@container (min-width: 700px) { .srrwx-day__facts .srrwx-narrow-only { display: none; } }

@container (min-width: 460px) {
	.srrwx-day__row {
		grid-template-columns: minmax(96px, 1fr) auto minmax(0, 1.3fr) auto 16px;
		grid-template-areas: "name icon cond temps chev";
		gap: 12px;
	}
	.srrwx-day__cond { display: block; grid-area: cond; min-width: 0; }
}
@container (min-width: 700px) {
	.srrwx-day__row {
		grid-template-columns: minmax(110px, 1fr) auto minmax(0, 1.4fr) 60px minmax(80px, .8fr) minmax(170px, 1.3fr) 16px;
		grid-template-areas: "name icon cond rain wind temps chev";
		padding: 10px 6px;
	}
	.srrwx-day__rain { display: inline-flex; grid-area: rain; }
	.srrwx-day__wind { display: block; grid-area: wind; }
	.srrwx-day__temps strong::after { content: none; }
	.srrwx-day__temps { gap: 10px; }
	.srrwx-day__temps strong { order: 3; }
	.srrwx-range { display: block; order: 2; }
	.srrwx-day__lo { order: 1; min-width: 2.2em; text-align: right; }
	.srrwx-day__body { padding: 2px 6px 16px; max-width: 72ch; }
}

/* ---------- Hourly ---------- */
.srrwx-hours-day + .srrwx-hours-day { margin-top: 16px; }
.srrwx-hours-day > .srrwx-eyebrow { margin-bottom: 8px; }
.srrwx-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.srrwx-hour {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	padding: 10px 4px;
	text-align: center;
	background: var(--srrwx-tint);
	border: 2px solid transparent;
	border-radius: var(--srrwx-inner-radius);
}
.srrwx-hour--now { border-color: var(--srrwx-accent); }
.srrwx--on-dark .srrwx-hour--now { border-color: rgb(255 255 255 / .7); }
.srrwx-hour__time { font-size: .78rem; font-weight: 700; }
.srrwx-hour__temp { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.srrwx-hour small { display: block; font-size: .7rem; line-height: 1.3; color: var(--srrwx-muted); }

/* ---------- Radar ---------- */
.srrwx-radar {
	position: relative;
	min-height: var(--srrwx-radar-h, 400px);
	overflow: hidden;
	background: var(--srrwx-tint);
	border: 1px solid var(--srrwx-line);
	border-radius: var(--srrwx-radius);
}
.srrwx-radar__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--srrwx-radar-h, 400px);
	font-size: .9rem;
	color: var(--srrwx-muted);
}
.srrwx-radar.is-loaded .srrwx-radar__placeholder { display: none; }
.srrwx-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--srrwx-line);
	border-top-color: var(--srrwx-accent);
	border-radius: 50%;
	animation: srrwx-spin 1s linear infinite;
}
@keyframes srrwx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.srrwx-spinner { animation-duration: 4s; }
	.srrwx-more .srrwx-ui, .srrwx-day__row > .srrwx-ui { transition: none; }
}
.srrwx-radar-img img { display: block; width: 100%; height: auto; }

/* ---------- Alerts ---------- */
.srrwx-alerts__list { display: grid; gap: 6px; }
.srrwx-alert { overflow: hidden; border-radius: var(--srrwx-inner-radius); background: var(--srrwx-alert-bg); color: var(--srrwx-alert-fg); }
.srrwx-alert__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none !important;
	background: var(--srrwx-alert-head-bg);
	color: var(--srrwx-alert-head) !important;
}
.srrwx-alert__toggle > .srrwx-ui { font-size: 1.15em; }
.srrwx-alert__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding-left: 12px;
	font-size: .82em;
	font-weight: 500;
	white-space: nowrap;
	opacity: .92;
}
.srrwx-alert__cta .srrwx-ui { transition: transform .2s ease; }
.srrwx-alert details[open] .srrwx-alert__cta .srrwx-ui { transform: rotate(180deg); }
.srrwx-alert__body { display: grid; gap: 12px; padding: 14px 16px 16px; font-size: .92rem; line-height: 1.55; }
.srrwx-alert__body * { color: inherit; }
.srrwx-alert__headlines { font-weight: 700; }
.srrwx-alert__times { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .85rem; }
.srrwx-alert__section h4 { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.srrwx-alert__section p { margin: 0 0 .5em; }
.srrwx-alert__section p:last-child { margin: 0; }
.srrwx-alert__audio { position: relative; z-index: 2; }
.srrwx-alert__audio audio { width: 100%; max-width: 480px; }
/* Top-of-site: a full-width bar. */
#localalert-weather .srrwx-alert, #localalert-weather .srrwx-alerts__list { border-radius: 0; gap: 1px; }
#localalert-weather .srrwx-alert__body { max-width: 1140px; margin: 0 auto; width: 100%; }

/* ---------- Vertical card (Weather Single widget / Vertical block) ---------- */
.srrwx-card-main > .srrwx-now { padding: 16px 16px 14px; }
.srrwx-card-main .srrwx-now__temp { font-size: 3rem; }
.srrwx-frame > .srrwx-card-main:only-child, .srrwx-frame > .srrwx-card-main:first-child:last-child { border-radius: var(--srrwx-radius); }
.srrwx-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	background: rgb(var(--srrwx-strip) / .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-top: 1px solid rgb(255 255 255 / .15);
}
.srrwx-strip li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	padding: 9px 2px 10px;
	text-align: center;
	border-left: 1px solid rgb(255 255 255 / .12);
}
.srrwx-strip li:first-child { border-left: 0; }
.srrwx-strip__name { font-size: .68rem; font-weight: 700; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.srrwx-strip strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.srrwx-strip small { display: inline-flex; align-items: center; gap: 2px; font-size: .68rem; opacity: .9; }
@container (min-width: 440px) {
	.srrwx-card-main > .srrwx-now { padding: 20px 22px 18px; }
	.srrwx-strip__name { font-size: .75rem; min-height: 0; }
}

/* ---------- Horizontal card ---------- */
.srrwx-hz { padding: 12px; }
.srrwx-hz__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.srrwx-hz__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	padding: 12px 6px;
	text-align: center;
	background: rgb(var(--srrwx-strip) / .45);
	border: 1px solid rgb(255 255 255 / .16);
	border-radius: var(--srrwx-inner-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srrwx-hz__cell--now { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .3); }
.srrwx-hz__name { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.srrwx-hz__cell strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.srrwx-hz__cell--now strong { font-size: 1.75rem; }
.srrwx-hz__hl { font-size: .6em; font-weight: 600; opacity: .8; margin-right: 1px; }
.srrwx-hz__cell small { display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; opacity: .92; }
@container (min-width: 420px) { .srrwx-hz__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 700px) { .srrwx-hz { padding: 14px; } .srrwx-hz__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.srrwx-frame > .srrwx-hz:only-child { border-radius: var(--srrwx-radius); }

/* ---------- Multiple locations ---------- */
.srrwx-locs { display: grid; gap: 8px; }
.srrwx-loc {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 76px;
	padding: 12px 14px;
	border-radius: var(--srrwx-inner-radius);
}
.srrwx-loc::before { background: linear-gradient(90deg, rgb(0 0 0 / min(.8, calc(var(--srrwx-overlay) + .2))), rgb(0 0 0 / calc(var(--srrwx-overlay) * .8))); }
.srrwx-loc__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.srrwx-loc__text strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srrwx-loc__text span { font-size: .8rem; opacity: .92; }
.srrwx-loc__temp { font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.srrwx-multi .srrwx-frame:has(> .wx-banner-ad, > .srrwx-sponsor) .srrwx-locs { padding: 8px; }

/* ---------- Header ---------- */
/* Full-width and left-aligned so it lines up with the widget title (header areas center text). */
.srrwx-header { display: flex; justify-content: flex-start; width: 100%; color: inherit; line-height: 1.2; text-align: left; }
.srrwx-header__inner { display: inline-flex; align-items: center; gap: 10px; color: inherit !important; text-decoration: none !important; }
.srrwx-header--icon-white .srrwx-icon { color: #fff; }
.srrwx-header--icon-black .srrwx-icon { color: #1c1c1c; }
.srrwx-header__temp { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.srrwx-header__cond { display: flex; flex-direction: column; font-size: .88rem; line-height: 1.3; }
.srrwx-header__cond small { font-size: .8em; opacity: .85; }
a.srrwx-header__inner:hover .srrwx-header__temp { opacity: .85; }

/* ---------- Sponsor, ads, inline text ---------- */
.srrwx-sponsor {
	padding: 10px 14px;
	font-size: .82rem;
	text-align: center;
	color: var(--srrwx-muted);
	background: var(--srrwx-tint);
}
.srrwx-sponsor a { font-weight: 650; color: var(--srrwx-ink); }
.srrwx-sponsor p { margin: 0; }
.wx-banner-ad { width: 100%; max-width: 100%; overflow: hidden; }
.wx-banner-ad img, .wx-banner-ad iframe, .wx-banner-ad video { max-width: 100%; height: auto; }
.srrwx-radar + .wx-banner-ad, .wx-banner-ad + .srrwx-radar { margin-top: 10px; }
.srrwx-today { display: inline; }

@media print {
	.srrwx-photo { color: #000; text-shadow: none; }
	.srrwx-photo::before, .srrwx-photo__img, .srrwx-radar { display: none; }
	.srrwx details > :not(summary) { display: block; }
}

/* ---------- Conditions cards ---------- */
.srrwx-dcards { --srrwx-cols: 4; --srrwx-gap: 14px; }
.srrwx-dcards__grid {
	display: grid;
	gap: var(--srrwx-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - (var(--srrwx-cols) - 1) * var(--srrwx-gap)) / var(--srrwx-cols))), 1fr));
}
@container (max-width: 440px) { .srrwx-dcards__grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
@container (max-width: 300px) { .srrwx-dcards__grid { grid-template-columns: 1fr; } }
.srrwx-dcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 210px;
	padding: 16px 18px;
	background: var(--srrwx-surface);
	border: 1px solid var(--srrwx-line);
	border-radius: var(--srrwx-radius);
}
.srrwx-dcard__label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--srrwx-muted); }
.srrwx-dcard__label .srrwx-ui { font-size: 1.2em; color: var(--srrwx-accent); }
.srrwx-dcard__body { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding-top: 10px; text-align: center; }
.srrwx-dcard__big { align-self: flex-start; font-size: 1.9rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.srrwx-dcard__value { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.srrwx-dcard__note { font-size: .8rem; line-height: 1.35; color: var(--srrwx-muted); }
.srrwx-dcard__pair, .srrwx-dcard__scale { display: flex; justify-content: space-between; align-self: stretch; }
.srrwx-dcard__pair strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.srrwx-dcard__scale { font-size: .75rem; color: var(--srrwx-muted); }
.srrwx-dcard__scale span:nth-child(2):not(:last-child) { font-weight: 650; color: var(--srrwx-ink); }

/* Bars (temperature trend, visibility). */
.srrwx-bars { display: flex; align-items: flex-end; align-self: stretch; gap: 5px; height: 84px; }
.srrwx-bars > span { flex: 1; min-width: 4px; border-radius: 999px; background: var(--srrwx-line); }
.srrwx-bars--vis > span.is-on { background: var(--srrwx-accent); }

/* Arc gauges. */
.srrwx-gauge { position: relative; width: 100%; max-width: 190px; }
.srrwx-gauge__svg { display: block; width: 100%; height: auto; overflow: visible; }
.srrwx-gauge__track, .srrwx-gauge__fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.srrwx-gauge__track { stroke: var(--srrwx-line); }
.srrwx-gauge__fill { stroke: var(--srrwx-accent); }
.srrwx-tick { stroke: var(--srrwx-line); stroke-width: 7; stroke-linecap: round; }
.srrwx-tick.is-on { stroke: var(--srrwx-accent); }
.srrwx-gauge__center { position: absolute; inset: 30% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.srrwx-gauge__center strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.srrwx-gauge__center span { font-size: .8rem; color: var(--srrwx-muted); max-width: 11em; }

/* Feels like. */
.srrwx-feels {
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--srrwx-feels);
	background: color-mix(in srgb, var(--srrwx-feels) 26%, var(--srrwx-surface));
}
.srrwx--on-dark .srrwx-feels { background: color-mix(in srgb, var(--srrwx-feels) 45%, transparent); }
.srrwx-feels strong { font-size: 2.1rem; font-weight: 750; letter-spacing: -.03em; }

/* Wind compass. */
.srrwx-compass { width: 118px; height: auto; overflow: visible; }
.srrwx-compass text { font-size: 12px; font-weight: 700; fill: var(--srrwx-muted); }
.srrwx-compass__ring { fill: none; stroke: var(--srrwx-line); stroke-width: 2; stroke-dasharray: 3 5; }
.srrwx-compass__needle { stroke: var(--srrwx-ink); stroke-width: 2.5; stroke-linecap: round; }
.srrwx-compass__head, .srrwx-compass__hub { fill: var(--srrwx-ink); }

/* Dew point meter. */
.srrwx-meter { align-self: stretch; height: 18px; border-radius: 999px; background: var(--srrwx-line); overflow: hidden; }
.srrwx-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6cd4a, #ef9f15 55%, #d9670b); }

/* Sun and moon arcs. */
.srrwx-dcard--sun .srrwx-dcard__body, .srrwx-dcard--moon-times .srrwx-dcard__body { align-items: stretch; justify-content: flex-end; }
.srrwx-sky__times { display: flex; justify-content: space-between; text-align: left; }
.srrwx-sky__times span:last-child { text-align: right; }
.srrwx-sky__times small { display: block; font-size: .78rem; color: var(--srrwx-muted); }
.srrwx-sky__times strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.srrwx-sky { display: block; width: 100%; height: 76px; overflow: visible; }
.srrwx-sky__ground { fill: var(--srrwx-tint); }
.srrwx-sky__below, .srrwx-sky__guide { fill: none; stroke: var(--srrwx-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.srrwx-sky__guide { stroke-dasharray: 3 4; }
.srrwx-sky__arc { fill: none; stroke: var(--srrwx-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.srrwx-sky--moon .srrwx-sky__arc { stroke-dasharray: 5 5; }
.srrwx-sky__dot { fill: var(--srrwx-ink); }
.srrwx-sky--sun .srrwx-sky__body { fill: #f6b40e; }
.srrwx-sky--sun .srrwx-sky__halo { fill: rgb(246 180 14 / .25); }
.srrwx-sky--moon .srrwx-sky__body { fill: #c9d2da; stroke: var(--srrwx-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.srrwx-sky--moon .srrwx-sky__halo { fill: color-mix(in srgb, var(--srrwx-accent) 14%, transparent); }

/* Moon phase. */
.srrwx-moon { width: 96px; height: 96px; }
.srrwx-moon__dark { fill: #2c3a41; }
.srrwx-moon__lit { fill: #f4f1e4; }
.srrwx-moon__edge { fill: none; stroke: var(--srrwx-ink); stroke-width: 2; }
.srrwx--on-dark .srrwx-moon__dark { fill: #10181c; }

/* Pollen. */
.srrwx-pollen { display: grid; gap: 12px; align-self: stretch; }
.srrwx-pollen li { display: grid; grid-template-columns: 4.2em 1fr auto; align-items: center; gap: 10px; font-size: .88rem; text-align: left; }
.srrwx-pollen__type { font-weight: 650; }
.srrwx-pollen__segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.srrwx-pollen__segs span { height: 8px; border-radius: 4px; background: var(--srrwx-line); }
.srrwx-pollen__segs.lvl-1 .is-on, .srrwx-pollen__segs.lvl-2 .is-on { background: #3aa655; }
.srrwx-pollen__segs.lvl-3 .is-on { background: #e6b800; }
.srrwx-pollen__segs.lvl-4 .is-on, .srrwx-pollen__segs.lvl-5 .is-on { background: #e8322b; }
.srrwx-pollen__cat { font-size: .8rem; color: var(--srrwx-muted); }
@container (max-width: 440px) {
	.srrwx-dcard { min-height: 180px; padding: 12px; }
	.srrwx-dcard__label { font-size: .82rem; }
	.srrwx-gauge__center strong { font-size: 1.1rem; }
	.srrwx-gauge__center span { font-size: .72rem; }
	.srrwx-feels { width: 96px; height: 96px; }
	.srrwx-feels strong { font-size: 1.7rem; }
	.srrwx-dcard__big { font-size: 1.5rem; }
	.srrwx-dcard__pair strong, .srrwx-dcard__value { font-size: 1.05rem; }
	.srrwx-sky__times strong { font-size: .92rem; }
	.srrwx-compass, .srrwx-moon { width: 84px; }
}

/* Stat tiles on the condition photo (frosted glass, matching the forecast cards). */
.srrwx-hero > .srrwx-tiles {
	grid-column: 1 / -1;
	background: rgb(255 255 255 / .14);
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: var(--srrwx-inner-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srrwx-hero > .srrwx-tiles .srrwx-tile { border-color: rgb(255 255 255 / .2); }
.srrwx-hero > .srrwx-tiles dt, .srrwx-hero > .srrwx-tiles dd small { color: rgb(255 255 255 / .85); }
.srrwx-photo--light > .srrwx-tiles { background: rgb(255 255 255 / .55); border-color: rgb(0 0 0 / .08); }
.srrwx-photo--light > .srrwx-tiles .srrwx-tile { border-color: rgb(0 0 0 / .08); }
.srrwx-photo--light > .srrwx-tiles dt, .srrwx-photo--light > .srrwx-tiles dd small { color: var(--srrwx-muted); }

/* Banner ad on a card's photo. Sits above the card's stretched link so the ad stays clickable. */
.srrwx-photo-ad { position: relative; z-index: 4; display: flex; justify-content: center; padding: 12px 12px 0; text-shadow: none; }
.srrwx-photo-ad--below { padding: 12px; }
.srrwx-photo-ad .wx-banner-ad { margin: 0; text-align: center; }
.srrwx-photo-ad img { display: inline-block; border-radius: calc(var(--srrwx-inner-radius) - 2px); }
.srrwx-hz > .srrwx-photo-ad { padding: 0 0 12px; }
.srrwx-hz > .srrwx-photo-ad--below { padding: 12px 0 0; }

/* Forecast days as frosted-glass cards (vertical strip and horizontal tiles), matching the
   current conditions block. A custom "Forecast Strip Color" tints them instead. */
.srrwx-strip {
	gap: 6px;
	padding: 0 12px 12px;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-top: 0;
}
.srrwx-strip li, .srrwx-hz__cell {
	background: rgb(255 255 255 / .14);
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: var(--srrwx-inner-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srrwx-strip li { padding: 8px 2px; }
.srrwx-strip li:first-child { border-left: 1px solid rgb(255 255 255 / .22); }
.srrwx--tinted .srrwx-strip li, .srrwx--tinted .srrwx-hz__cell { background: rgb(var(--srrwx-strip) / .45); border-color: rgb(255 255 255 / .16); }
.srrwx-hz__cell--now, .srrwx--tinted .srrwx-hz__cell--now { background: rgb(255 255 255 / .22); border-color: rgb(255 255 255 / .32); }
@container (max-width: 320px) { .srrwx-strip { gap: 4px; padding: 0 8px 8px; } .srrwx-strip li { padding: 7px 1px; } }

/* Vertical card: the forecast days share one frosted-glass panel, divided by hairlines.
   (.srrwx prefix: must outrank the base list reset, .srrwx ul { margin: 0 }.) */
.srrwx .srrwx-strip {
	gap: 0;
	margin: 0 12px 12px;
	padding: 0;
	overflow: hidden;
	background: rgb(255 255 255 / .14);
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: var(--srrwx-inner-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srrwx-strip li,
.srrwx-strip li:first-child {
	padding: 9px 2px 10px;
	background: none;
	border: 0;
	border-left: 1px solid rgb(255 255 255 / .2);
	border-radius: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.srrwx-strip li:first-child { border-left: 0; }
.srrwx--tinted .srrwx-strip { background: rgb(var(--srrwx-strip) / .45); border-color: rgb(255 255 255 / .16); }
.srrwx--tinted .srrwx-strip li { background: none; }
@container (max-width: 320px) { .srrwx .srrwx-strip { margin: 0 8px 8px; } .srrwx-strip li, .srrwx-strip li:first-child { padding: 8px 1px; } }

/* Horizontal card: the same single frosted panel. Cells are divided by hairlines both ways
   (it wraps to three or two per row in narrower columns); "Now" is slightly brighter. */
.srrwx .srrwx-hz__grid {
	gap: 0;
	overflow: hidden;
	background: rgb(255 255 255 / .14);
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: var(--srrwx-inner-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srrwx .srrwx-hz__cell {
	margin: 0 -1px -1px 0;
	background: none;
	border: 0;
	border-right: 1px solid rgb(255 255 255 / .2);
	border-bottom: 1px solid rgb(255 255 255 / .2);
	border-radius: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.srrwx .srrwx-hz__cell--now { background: rgb(255 255 255 / .12); }
.srrwx--tinted .srrwx-hz__grid { background: rgb(var(--srrwx-strip) / .45); border-color: rgb(255 255 255 / .16); }

/* ---------- Slider slides ([weather-slide] / [weather-slider]) ----------
   Slides are fixed-height boxes (as short as 210px on phones), so the slide layout is
   compact: reading on one row, periods as a row of small cards, details only when wide.
   "safe center" trims the bottom, never the top, if a slide is still too short. */
.srrwx-current--slide, .srrwx-current--slider { height: 100%; }
.srrwx-current--slide .srrwx-hero, .srrwx-current--slider .srrwx-hero {
	height: 100%;
	overflow: hidden;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 0;
	align-content: safe center;
}
.srrwx-current--slide .srrwx-now, .srrwx-current--slider .srrwx-now { gap: 4px; }
.srrwx-current--slide .srrwx-hero .srrwx-now__main, .srrwx-current--slider .srrwx-hero .srrwx-now__main { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
.srrwx-current--slide .srrwx-hero .srrwx-now__temp, .srrwx-current--slider .srrwx-hero .srrwx-now__temp { font-size: clamp(2.5rem, 11cqi, 4.25rem); }
.srrwx-current--slide .srrwx-hero .srrwx-now__cond, .srrwx-current--slider .srrwx-hero .srrwx-now__cond { align-items: flex-start; text-align: left; }
.srrwx-current--slide .srrwx-hero .srrwx-now__cond strong, .srrwx-current--slider .srrwx-hero .srrwx-now__cond strong { font-size: 1.1rem; }
.srrwx-current--slide .srrwx-now__reading .srrwx-icon, .srrwx-current--slider .srrwx-now__reading .srrwx-icon { --srrwx-s: 56px !important; }
/* The whole slide stays a link; only the visible "Full forecast" label is dropped. */
.srrwx-current--slide .srrwx-more, .srrwx-current--slider .srrwx-more { margin: 0; font-size: 0; }
.srrwx-current--slide .srrwx-more .srrwx-ui, .srrwx-current--slider .srrwx-more .srrwx-ui { display: none; }
.srrwx-current--slide .srrwx-now__meta, .srrwx-current--slider .srrwx-now__meta,
.srrwx-current--slide .srrwx-hero .srrwx-mini, .srrwx-current--slider .srrwx-hero .srrwx-mini { display: none; }
.srrwx-current--slide .srrwx-periods, .srrwx-current--slider .srrwx-periods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.srrwx-current--slide .srrwx-period, .srrwx-current--slider .srrwx-period {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px;
	text-align: center;
}
.srrwx-current--slide .srrwx-period .srrwx-icon, .srrwx-current--slider .srrwx-period .srrwx-icon { --srrwx-s: 32px !important; }
.srrwx-current--slide .srrwx-period__temp, .srrwx-current--slider .srrwx-period__temp { font-size: 1.2rem; }
.srrwx-current--slide .srrwx-period__temp small, .srrwx-current--slider .srrwx-period__temp small,
.srrwx-current--slide .srrwx-period__text, .srrwx-current--slider .srrwx-period__text { display: none; }
.srrwx-current--slide .srrwx-period__name, .srrwx-current--slider .srrwx-period__name { font-size: .68rem; }
@container (min-width: 600px) {
	.srrwx-current--slide .srrwx-now__meta, .srrwx-current--slider .srrwx-now__meta { display: flex; }
	.srrwx-current--slide .srrwx-hero .srrwx-mini, .srrwx-current--slider .srrwx-hero .srrwx-mini { display: grid; }
	.srrwx-current--slide .srrwx-now__reading .srrwx-icon, .srrwx-current--slider .srrwx-now__reading .srrwx-icon { --srrwx-s: 72px !important; }
	.srrwx-current--slide .srrwx-hero, .srrwx-current--slider .srrwx-hero { padding: 18px 24px; }
}
@container (min-width: 760px) {
	.srrwx-current--slide .srrwx-period, .srrwx-current--slider .srrwx-period { justify-content: center; padding: 12px 8px; }
	.srrwx-current--slide .srrwx-period .srrwx-icon, .srrwx-current--slider .srrwx-period .srrwx-icon { --srrwx-s: 44px !important; }
	.srrwx-current--slide .srrwx-period__temp small, .srrwx-current--slider .srrwx-period__temp small { display: block; }
	.srrwx-current--slide .srrwx-period__text, .srrwx-current--slider .srrwx-period__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
/* Slides are wide and short: reading and periods side by side from tablet width. */
@container (min-width: 600px) {
	.srrwx-current--slide .srrwx-hero, .srrwx-current--slider .srrwx-hero { grid-template-columns: minmax(230px, 1fr) minmax(0, 1.6fr); align-items: center; gap: 18px; }
	.srrwx-current--slide .srrwx-hero > .srrwx-now, .srrwx-current--slider .srrwx-hero > .srrwx-now { justify-content: center; }
}
/* Phone slides: one tight row for the reading so it never wraps onto a second line. */
@container (max-width: 440px) {
	.srrwx-current--slide .srrwx-hero, .srrwx-current--slider .srrwx-hero { padding: 10px 12px; gap: 8px; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__main, .srrwx-current--slider .srrwx-hero .srrwx-now__main { flex-wrap: nowrap; gap: 10px; }
	.srrwx-current--slide .srrwx-now__reading, .srrwx-current--slider .srrwx-now__reading { gap: 8px; }
	.srrwx-current--slide .srrwx-now__reading .srrwx-icon, .srrwx-current--slider .srrwx-now__reading .srrwx-icon { --srrwx-s: 46px !important; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__temp, .srrwx-current--slider .srrwx-hero .srrwx-now__temp { font-size: 2.6rem; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__cond strong, .srrwx-current--slider .srrwx-hero .srrwx-now__cond strong { font-size: 1rem; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__cond span, .srrwx-current--slider .srrwx-hero .srrwx-now__cond span { font-size: .8rem; }
	.srrwx-current--slide .srrwx-periods, .srrwx-current--slider .srrwx-periods { gap: 6px; }
	.srrwx-current--slide .srrwx-period, .srrwx-current--slider .srrwx-period { padding: 6px 2px; gap: 0; }
	.srrwx-current--slide .srrwx-period .srrwx-icon, .srrwx-current--slider .srrwx-period .srrwx-icon { --srrwx-s: 28px !important; }
	.srrwx-current--slide .srrwx-period__temp, .srrwx-current--slider .srrwx-period__temp { font-size: 1.05rem; }
}
/* Desktop slides (900px+): reading and periods side by side, with the stat tiles along
   the bottom like the Current block, so the slide's height is used instead of left empty.
   Narrower slides hide the tiles and keep the compact layout. */
.srrwx-current--slide .srrwx-hero > .srrwx-tiles, .srrwx-current--slider .srrwx-hero > .srrwx-tiles { display: none; }
@container (min-width: 900px) {
	.srrwx-current--slide .srrwx-hero, .srrwx-current--slider .srrwx-hero {
		grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr);
		align-content: safe center;
		gap: 16px 24px;
		padding: 22px 28px;
	}
	.srrwx-current--slide .srrwx-hero > .srrwx-tiles, .srrwx-current--slider .srrwx-hero > .srrwx-tiles { display: grid; }
	.srrwx-current--slide .srrwx-hero .srrwx-mini, .srrwx-current--slider .srrwx-hero .srrwx-mini { display: none; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__main, .srrwx-current--slider .srrwx-hero .srrwx-now__main { flex-direction: column; gap: 2px; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__cond, .srrwx-current--slider .srrwx-hero .srrwx-now__cond { align-items: center; text-align: center; }
	.srrwx-current--slide .srrwx-now__reading .srrwx-icon, .srrwx-current--slider .srrwx-now__reading .srrwx-icon { --srrwx-s: 88px !important; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__temp, .srrwx-current--slider .srrwx-hero .srrwx-now__temp { font-size: clamp(4rem, 7cqi, 5.5rem); }
	.srrwx-current--slide .srrwx-hero .srrwx-now__cond strong, .srrwx-current--slider .srrwx-hero .srrwx-now__cond strong { font-size: 1.4rem; }
	.srrwx-current--slide .srrwx-hero .srrwx-now__cond span, .srrwx-current--slider .srrwx-hero .srrwx-now__cond span { font-size: 1rem; }
	.srrwx-current--slide .srrwx-periods, .srrwx-current--slider .srrwx-periods { gap: 12px; align-items: stretch; }
	.srrwx-current--slide .srrwx-period, .srrwx-current--slider .srrwx-period { justify-content: center; gap: 4px; padding: 14px 12px; }
	.srrwx-current--slide .srrwx-period .srrwx-icon, .srrwx-current--slider .srrwx-period .srrwx-icon { --srrwx-s: 52px !important; }
	.srrwx-current--slide .srrwx-period__temp, .srrwx-current--slider .srrwx-period__temp { font-size: 1.9rem; }
	.srrwx-current--slide .srrwx-period__text, .srrwx-current--slider .srrwx-period__text { font-size: .9rem; }
	.srrwx-current--slide .srrwx-tile, .srrwx-current--slider .srrwx-tile { padding: 12px 16px; }
}