/*!
 * Trailhead Conditions – front-end styles.
 * Everything is scoped under .thc so it cannot leak into (or be broken by) the host theme.
 * Layout adapts to the width of the container (not the viewport) using container queries.
 */

/* ---------- Tokens ---------------------------------------------------- */
.thc {
	--thc-accent: #2f6f4e;
	--thc-radius: 14px;
	--thc-bg: #ffffff;
	--thc-surface: #f3f6f4;
	--thc-text: #17201b;
	--thc-muted: #56655e;
	--thc-border: #dbe3de;
	--thc-shadow: 0 1px 2px rgba(20, 30, 25, .05), 0 4px 16px rgba(20, 30, 25, .05);
	--thc-good: #2f9e5a;
	--thc-warn: #e2b400;
	--thc-orange: #ee7f1b;
	--thc-bad: #d8412f;
	--thc-info: #2f6fb0;
	--thc-sun: #f4b400;
	--thc-cloud: #b4c2d3;
	--thc-cloud-edge: #9aa9bc;
	--thc-cloud-dark: #8595a9;
	--thc-rain: #3d86d0;
	--thc-snowc: #6fa8de;
	--thc-snow-text: #2a6db0;
	--thc-moon: #d9dfe9;

	container-type: inline-size;
	container-name: thc;
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 1.5em;
	color: var(--thc-text);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

.thc[data-theme="dark"] {
	--thc-bg: #161d19;
	--thc-surface: #1e2823;
	--thc-text: #e9efeb;
	--thc-muted: #a2b3aa;
	--thc-border: #2e3b34;
	--thc-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	--thc-cloud: #6c7d92;
	--thc-cloud-edge: #58697e;
	--thc-cloud-dark: #4b5a6d;
	--thc-rain: #6db0f2;
	--thc-snowc: #9ccbf5;
	--thc-snow-text: #8fc2f2;
	--thc-moon: #c9d2e0;
}

@media (prefers-color-scheme: dark) {
	.thc[data-theme="auto"] {
		--thc-bg: #161d19;
		--thc-surface: #1e2823;
		--thc-text: #e9efeb;
		--thc-muted: #a2b3aa;
		--thc-border: #2e3b34;
		--thc-shadow: 0 1px 2px rgba(0, 0, 0, .3);
		--thc-cloud: #6c7d92;
		--thc-cloud-edge: #58697e;
		--thc-cloud-dark: #4b5a6d;
		--thc-rain: #6db0f2;
		--thc-snowc: #9ccbf5;
		--thc-snow-text: #8fc2f2;
		--thc-moon: #c9d2e0;
	}
}

.thc *,
.thc *::before,
.thc *::after {
	box-sizing: border-box;
}

.thc :where(h2, h3, h4, p, ul, li) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.thc ul {
	list-style: none;
}

.thc a {
	color: var(--thc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.thc [hidden] {
	display: none !important;
}

.thc svg {
	max-width: none;
}

.thc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.thc-loading,
.thc-noscript,
.thc-admin-notice {
	padding: 16px;
	border: 1px dashed var(--thc-border, #ccc);
	border-radius: 12px;
	color: var(--thc-muted, #666);
	font-size: .95rem;
}

/* ---------- Focus ------------------------------------------------------ */
.thc button:focus-visible,
.thc a:focus-visible,
.thc input:focus-visible,
.thc summary:focus-visible,
.thc .thc-hourly:focus-visible {
	outline: 2px solid var(--thc-accent);
	outline-offset: 2px;
}

/* ---------- Header ------------------------------------------------------ */
.thc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 14px 16px;
	margin-bottom: 16px;
	background: var(--thc-bg);
	border: 1px solid var(--thc-border);
	border-radius: var(--thc-radius);
	box-shadow: var(--thc-shadow);
}

.thc-head__place {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.thc-head__pin {
	color: var(--thc-accent);
	flex: none;
}

.thc-head__name {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--thc-text);
	overflow-wrap: anywhere;
}

.thc-head__sub {
	font-size: .85rem;
	color: var(--thc-muted);
}

.thc-head__tools {
	display: flex;
	flex: 1 1 320px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.thc-search {
	position: relative;
	display: flex;
	flex: 1 1 200px;
	max-width: 340px;
	gap: 6px;
}

.thc-input {
	width: 100%;
	min-width: 0;
	padding: 9px 12px;
	font: inherit;
	font-size: .95rem;
	color: var(--thc-text);
	background: var(--thc-surface);
	border: 1px solid var(--thc-border);
	border-radius: 10px;
	box-shadow: none;
	height: auto;
	margin: 0;
}

.thc-input::placeholder {
	color: var(--thc-muted);
	opacity: 1;
}

.thc-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 11px;
	font: inherit;
	font-size: .9rem;
	line-height: 1;
	color: var(--thc-text);
	background: var(--thc-bg);
	border: 1px solid var(--thc-border);
	border-radius: 10px;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 38px;
}

.thc-btn:hover {
	color: var(--thc-accent);
	border-color: var(--thc-accent);
	background: var(--thc-bg);
}

.thc-btn--ghost {
	margin-top: 8px;
	font-size: .85rem;
}

.thc-btn.is-loading .thc-glyph svg {
	animation: thc-spin 1s linear infinite;
}

.thc-seg {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--thc-border);
	border-radius: 10px;
}

.thc-seg__btn {
	appearance: none;
	padding: 9px 11px;
	font: inherit;
	font-size: .9rem;
	line-height: 1;
	color: var(--thc-muted);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	min-height: 38px;
	box-shadow: none;
}

.thc-seg__btn[aria-pressed="true"] {
	color: #fff;
	background: var(--thc-accent);
}

.thc-results {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 260px;
	max-height: 320px;
	overflow: auto;
	background: var(--thc-bg);
	border: 1px solid var(--thc-border);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.thc-results__msg {
	padding: 12px 14px;
	font-size: .9rem;
	color: var(--thc-muted);
}

.thc-result {
	appearance: none;
	display: block;
	width: 100%;
	padding: 10px 14px;
	font: inherit;
	text-align: left;
	color: var(--thc-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	box-shadow: none;
}

.thc-result span {
	display: block;
	font-size: .8rem;
	color: var(--thc-muted);
}

.thc-result:hover,
.thc-result:focus-visible {
	background: var(--thc-surface);
}

/* ---------- Banner ------------------------------------------------------ */
.thc-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #fff;
	border-radius: var(--thc-radius);
	background: #b54708;
}

.thc-banner--severe { background: #b42318; }
.thc-banner--extreme { background: #7f1d1d; }

.thc-banner__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.thc-banner__text span {
	font-size: .85rem;
	opacity: .92;
}

.thc-banner a {
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Grid & cards -------------------------------------------------- */
.thc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

@container thc (min-width: 720px) {
	.thc[data-layout="full"] .thc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.thc[data-layout="full"] .thc-card--wide {
		grid-column: 1 / -1;
	}
}

.thc-card {
	min-width: 0;
	padding: 16px;
	background: var(--thc-bg);
	border: 1px solid var(--thc-border);
	border-radius: var(--thc-radius);
	box-shadow: var(--thc-shadow);
}

.thc-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.thc-card__glyph {
	color: var(--thc-accent);
}

.thc-card__title {
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--thc-text);
}

.thc-empty-card {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--thc-muted);
}

.thc-sub {
	margin: 16px 0 6px;
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	color: var(--thc-muted);
}

.thc-card__body > .thc-block:first-child .thc-sub:first-child,
.thc-card__body > .thc-sub:first-child {
	margin-top: 0;
}

.thc-block + .thc-block {
	margin-top: 4px;
}

.thc-note {
	margin: 4px 0;
	font-size: .875rem;
	color: var(--thc-muted);
}

.thc-note--small {
	font-size: .78rem;
}

.thc-prewrap {
	margin: 6px 0;
	white-space: pre-line;
	font-size: .9rem;
	overflow-wrap: anywhere;
}

.thc-linkrow {
	margin-top: 8px;
	font-size: .875rem;
}

.thc-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.thc-glyph {
	display: inline-flex;
	flex: none;
	vertical-align: middle;
}

.thc-glyph svg {
	display: block;
}

.thc-stat {
	min-width: 0;
}

.thc-stat__label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: .75rem;
	color: var(--thc-muted);
}

.thc-stat__value {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 1.15rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.thc-stat__sub {
	font-size: .78rem;
	color: var(--thc-muted);
	overflow-wrap: anywhere;
}

/* ---------- Skeleton / errors ------------------------------------------- */
.thc-skel i {
	display: block;
	height: 14px;
	margin: 12px 0;
	border-radius: 7px;
	background: linear-gradient(90deg, var(--thc-surface) 25%, var(--thc-border) 50%, var(--thc-surface) 75%);
	background-size: 200% 100%;
	animation: thc-shimmer 1.4s ease-in-out infinite;
}

.thc-skel i:nth-child(1) { width: 100%; }
.thc-skel i:nth-child(2) { width: 82%; }
.thc-skel i:nth-child(3) { width: 58%; }

.thc-card--hero .thc-skel { padding: 20px; }

.thc-error,
.thc-empty {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--thc-text);
}

.thc-error .thc-glyph { color: var(--thc-bad); margin-top: 2px; }
.thc-empty .thc-glyph { color: var(--thc-good); margin-top: 2px; }

@keyframes thc-shimmer { to { background-position: -200% 0; } }
@keyframes thc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.thc-skel i,
	.thc-btn.is-loading .thc-glyph svg {
		animation: none;
	}
}

/* ---------- Icons ------------------------------------------------------- */
.thc-icon {
	display: inline-flex;
	flex: none;
}

.thc-icon svg { display: block; }
.thc .i-sun circle { fill: var(--thc-sun); }
.thc .i-rays line { stroke: var(--thc-sun); stroke-width: 3.2; stroke-linecap: round; }
.thc .i-cloud { fill: var(--thc-cloud); stroke: var(--thc-cloud-edge); stroke-width: 1; }
.thc .i-cloud-back,
.thc .i-cloud-dark { fill: var(--thc-cloud-dark); stroke: none; }
.thc .i-moon { fill: var(--thc-moon); }
.thc .i-drop line { stroke: var(--thc-rain); stroke-width: 3.2; stroke-linecap: round; }
.thc .i-flake circle { fill: var(--thc-snowc); }
.thc .i-line line { stroke: var(--thc-cloud-dark); stroke-width: 3.2; stroke-linecap: round; }
.thc .i-bolt { fill: var(--thc-sun); stroke: #b98600; stroke-width: 1; stroke-linejoin: round; }

/* ---------- Hero -------------------------------------------------------- */
.thc-card--hero {
	padding: 0;
	overflow: hidden;
	border: 0;
}

.thc-hero {
	padding: 22px;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
	background: linear-gradient(155deg, #1b5fa6, #2f83cc);
}

.thc-sky-partly { background: linear-gradient(155deg, #2b679f, #4f86b4); }
.thc-sky-cloud { background: linear-gradient(155deg, #52627a, #6f7f93); }
.thc-sky-rain { background: linear-gradient(155deg, #34495e, #52697f); }
.thc-sky-storm { background: linear-gradient(155deg, #262d3d, #444a63); }
.thc-sky-snow { background: linear-gradient(155deg, #56708c, #7591ab); }
.thc-sky-fog { background: linear-gradient(155deg, #5f6b76, #7d8892); }
.thc-sky-night { background: linear-gradient(155deg, #0e1b38, #26417d); }
.thc-sky-night-cloud { background: linear-gradient(155deg, #1b2438, #38435c); }

.thc-hero .i-cloud { fill: #f4f7fb; stroke: none; }
.thc-hero .i-cloud-back,
.thc-hero .i-cloud-dark { fill: #c5d0de; }
.thc-hero .i-moon { fill: #f1f4fa; }
.thc-hero .i-drop line { stroke: #9fd0ff; }
.thc-hero .i-flake circle { fill: #ffffff; }
.thc-hero .i-line line { stroke: #dbe4ee; }

.thc-hero__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.thc-hero__temp {
	display: flex;
	align-items: flex-start;
	line-height: 1;
}

.thc-hero__deg {
	font-size: 4.4rem;
	font-weight: 300;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.thc-hero__unit {
	margin-top: .55rem;
	font-size: 1.4rem;
	font-weight: 400;
	opacity: .9;
}

.thc-hero__cond {
	font-size: 1.35rem;
	font-weight: 600;
}

.thc-hero__feels,
.thc-hero__hilo {
	font-size: .95rem;
	opacity: .95;
}

.thc-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 18px;
}

.thc-hero .thc-stat {
	padding: 10px 12px;
	background: rgba(0, 0, 0, .2);
	border-radius: 10px;
}

.thc-hero .thc-stat__label,
.thc-hero .thc-stat__sub {
	color: rgba(255, 255, 255, .88);
}

.thc-windarrow {
	display: inline-flex;
	color: #fff;
}

@container thc (min-width: 560px) {
	.thc-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container thc (max-width: 420px) {
	.thc-hero { padding: 16px; }
	.thc-hero__deg { font-size: 3.6rem; }
	.thc-head__name { font-size: 1.2rem; }
}

.thc[data-layout="compact"] .thc-hero__stats .thc-stat:nth-child(n + 5) { display: none; }
.thc[data-layout="compact"] .thc-hero__deg { font-size: 3.2rem; }

/* ---------- Hourly ------------------------------------------------------- */
.thc-hourly {
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.thc-hourly__inner { position: relative; }
.thc-hourly__chart { display: block; }
.thc-hourly__line { stroke: var(--thc-accent); stroke-width: 2.5; stroke-linecap: round; }
.thc-hourly__area { fill: var(--thc-accent); opacity: .12; }

.thc-hourly__cols {
	display: flex;
}

.thc-hour {
	display: flex;
	flex: 0 0 58px;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-size: .85rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.thc-hour--newday {
	border-left: 1px dashed var(--thc-border);
}

.thc-hour__time { font-size: .78rem; color: var(--thc-muted); white-space: nowrap; }
.thc-hour__temp { font-weight: 650; }
.thc-hour__pop { min-height: 1.1em; font-size: .75rem; color: var(--thc-rain); }
.thc-hour__snow { min-height: 1.1em; font-size: .72rem; font-weight: 600; color: var(--thc-snow-text); }

/* ---------- Daily -------------------------------------------------------- */
.thc-day {
	display: grid;
	grid-template-columns: 3.4rem 34px 3.3rem 2.4rem minmax(48px, 1fr) 2.4rem;
	grid-template-areas:
		"name icon precip lo bar hi"
		"date icon precip lo bar hi";
	column-gap: 10px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid var(--thc-border);
	font-variant-numeric: tabular-nums;
}

.thc-day:first-child { border-top: 0; }
.thc-day__name { grid-area: name; font-weight: 650; align-self: end; line-height: 1.15; }
.thc-day__date { grid-area: date; font-size: .75rem; color: var(--thc-muted); align-self: start; line-height: 1.15; }
.thc-day__icon { grid-area: icon; grid-row: 1 / 3; }
.thc-day__precip { grid-area: precip; display: flex; flex-direction: column; grid-row: 1 / 3; line-height: 1.2; }
.thc-day__pop { font-size: .82rem; color: var(--thc-rain); }
.thc-day__amt { font-size: .72rem; color: var(--thc-muted); }
.thc-day__amt.is-snow { font-weight: 650; color: var(--thc-snow-text); }
.thc-day__lo { grid-area: lo; grid-row: 1 / 3; text-align: right; color: var(--thc-muted); }
.thc-day__hi { grid-area: hi; grid-row: 1 / 3; font-weight: 650; }
.thc-day__bar { grid-area: bar; grid-row: 1 / 3; position: relative; height: 6px; background: var(--thc-surface); border: 1px solid var(--thc-border); border-radius: 4px; }
.thc-day__fill { position: absolute; top: -1px; bottom: -1px; border-radius: 4px; }
.thc-day__wind { display: none; grid-area: wind; grid-row: 1 / 3; font-size: .8rem; color: var(--thc-muted); text-align: right; }

@container thc (min-width: 900px) {
	.thc[data-layout="full"] .thc-day { grid-template-columns: 3.4rem 34px 3.3rem 2.4rem minmax(48px, 1fr) 2.4rem 4.5rem; grid-template-areas: "name icon precip lo bar hi wind" "date icon precip lo bar hi wind"; }
	.thc[data-layout="full"] .thc-day__wind { display: block; }
}

/* ---------- Sun & moon ---------------------------------------------------- */
.thc-sun__top { text-align: center; }
.thc-arc { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
.thc-arc__horizon { stroke: var(--thc-border); stroke-width: 2; }
.thc-arc__track { stroke: var(--thc-cloud-dark); stroke-width: 2.5; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .8; }
.thc-arc__done { stroke: var(--thc-sun); stroke-width: 4; stroke-linecap: round; }
.thc-arc__sun { fill: var(--thc-sun); }
.thc-arc__glow { fill: var(--thc-sun); opacity: .25; }
.thc-sun__status { display: flex; flex-direction: column; margin: 2px 0 12px; }
.thc-sun__status span { font-size: .82rem; color: var(--thc-muted); }

.thc-times {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	padding: 12px;
	background: var(--thc-surface);
	border-radius: 12px;
}

.thc-time { display: flex; flex-direction: column; }
.thc-time__label { font-size: .75rem; color: var(--thc-muted); }
.thc-time__value { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.thc-sunlist li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
	border-top: 1px solid var(--thc-border);
}

.thc-sunlist li:first-child { border-top: 0; }
.thc-sunlist li span:first-child { color: var(--thc-muted); }

.thc-moonrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--thc-border);
}

.thc-moon { flex: none; }
.thc-moon__dark { fill: var(--thc-cloud-dark); opacity: .55; }
.thc-moon__lit { fill: var(--thc-moon); stroke: rgba(0, 0, 0, .12); stroke-width: .6; }
.thc[data-theme="light"] .thc-moon__lit,
.thc:not([data-theme="dark"]) .thc-moon__lit { fill: #f3c94c; }
@media (prefers-color-scheme: dark) { .thc[data-theme="auto"] .thc-moon__lit { fill: var(--thc-moon); } }
.thc[data-theme="dark"] .thc-moon__lit { fill: var(--thc-moon); }

/* ---------- Air quality --------------------------------------------------- */
.thc-air__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.thc-gauge { position: relative; flex: 0 0 auto; width: 220px; max-width: 100%; }
.thc-gauge svg { display: block; width: 100%; height: auto; }
.thc-gauge__band { stroke-linecap: butt; }
.thc-gauge__marker { stroke: var(--thc-bg); stroke-width: 3; }
.thc-gauge__read { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.thc-gauge__num { font-size: 2.3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.thc-gauge__cat { padding: 2px 10px; font-size: .78rem; font-weight: 650; border-radius: 999px; white-space: nowrap; }

.thc-air__side { flex: 1 1 180px; min-width: 0; }
.thc-air__main { display: flex; flex-direction: column; margin-bottom: 4px; }
.thc-air__advice { font-size: .9rem; }

.thc-pols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 14px;
}

@container thc (min-width: 420px) { .thc-pols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.thc-pol {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "dot name" "val val" "unit unit";
	align-items: center;
	column-gap: 6px;
	padding: 8px 10px;
	background: var(--thc-surface);
	border-radius: 10px;
	border: 1px solid transparent;
}

.thc-pol.is-main { border-color: var(--thc-border); background: var(--thc-bg); box-shadow: inset 0 0 0 1px var(--thc-border); }
.thc-pol__dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; }
.thc-pol__name { grid-area: name; font-size: .78rem; color: var(--thc-muted); }
.thc-pol__val { grid-area: val; font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.thc-pol__unit { grid-area: unit; font-size: .7rem; color: var(--thc-muted); }

.thc-aqbars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 64px;
	margin: 6px 0 24px;
	position: relative;
}

.thc-aqbars li { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.thc-aqbars i { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; }
.thc-aqbars span { position: absolute; left: 0; bottom: -16px; font-size: .62rem; color: var(--thc-muted); white-space: nowrap; }

/* ---------- Snow ---------------------------------------------------------- */
.thc-avy__scale { display: flex; gap: 3px; margin: 14px 0 10px; }
.thc-avy__seg {
	display: grid;
	flex: 1;
	place-items: center;
	height: 26px;
	font-size: .8rem;
	font-weight: 700;
	border-radius: 6px;
	opacity: .35;
}

.thc-avy__seg.is-active { opacity: 1; height: 32px; margin-top: -3px; box-shadow: 0 0 0 2px var(--thc-bg), 0 0 0 4px var(--thc-text); }
.thc-avy__read { font-size: 1rem; }

.thc-callout {
	margin: 8px 0;
	padding: 10px 12px;
	font-size: .9rem;
	border-left: 4px solid var(--thc-orange);
	border-radius: 8px;
	background: rgba(238, 127, 27, .12);
}

.thc-callout--severe { border-left-color: var(--thc-bad); background: rgba(216, 65, 47, .12); }

.thc-snowpack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.thc-snowpack__num { display: flex; flex-direction: column; }
.thc-bignum { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--thc-snow-text); }
.thc-bignum--sm { font-size: 1.4rem; }
.thc-snowpack__spark { display: flex; flex-direction: column; }
.thc-spark { display: block; width: 160px; height: 36px; }
.thc-spark polyline { stroke: var(--thc-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.thc-spark--snow polyline { stroke: var(--thc-snow-text); }
.thc-spark circle { fill: var(--thc-snow-text); }

.thc-snowstats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.thc-snowbars { display: flex; align-items: stretch; gap: 6px; height: 120px; }
.thc-snowbars li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; font-size: .7rem; color: var(--thc-muted); }
.thc-snowbars__col { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.thc-snowbars i { display: block; width: 100%; max-width: 30px; background: var(--thc-snowc); border-radius: 4px 4px 0 0; }
.thc-snowbars__amt { font-weight: 650; color: var(--thc-snow-text); min-height: 1.2em; line-height: 1.2; }

/* ---------- Fire ---------------------------------------------------------- */
.thc-firebadge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-left: 5px solid var(--thc-border);
	border-radius: 10px;
	background: var(--thc-surface);
}

.thc-firebadge__label { display: block; font-size: .75rem; color: var(--thc-muted); }
.thc-firebadge strong { font-size: 1.1rem; }
.thc-firebadge--clear { border-left-color: var(--thc-good); background: rgba(47, 158, 90, .12); }
.thc-firebadge--clear .thc-glyph { color: var(--thc-good); }
.thc-firebadge--elevated { border-left-color: var(--thc-warn); background: rgba(226, 180, 0, .16); }
.thc-firebadge--elevated .thc-glyph { color: #b58900; }
.thc-firebadge--high { border-left-color: var(--thc-orange); background: rgba(238, 127, 27, .16); }
.thc-firebadge--high .thc-glyph { color: var(--thc-orange); }
.thc-firebadge--extreme { border-left-color: var(--thc-bad); background: rgba(216, 65, 47, .16); }
.thc-firebadge--extreme .thc-glyph { color: var(--thc-bad); }
.thc-firebadge--unknown .thc-glyph { color: var(--thc-muted); }

.thc-reasons { margin: 8px 0 0 !important; padding-left: 18px !important; list-style: disc !important; font-size: .875rem; color: var(--thc-text); }
.thc-reasons li { margin: 2px 0; }

.thc-restr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }

.thc-tag {
	display: inline-block;
	padding: 2px 9px;
	font-size: .75rem;
	font-weight: 650;
	line-height: 1.5;
	color: var(--thc-text);
	background: var(--thc-surface);
	border: 1px solid var(--thc-border);
	border-radius: 999px;
}

.thc-tag--restr-none { background: rgba(47, 158, 90, .16); border-color: transparent; }
.thc-tag--restr-stage1 { background: rgba(226, 180, 0, .25); border-color: transparent; }
.thc-tag--restr-stage2 { background: rgba(216, 65, 47, .22); border-color: transparent; }
.thc-tag--restr-closure { color: #fff; background: #7f1d1d; border-color: transparent; }
.thc-tag--wf { background: rgba(216, 65, 47, .18); border-color: transparent; }
.thc-tag--rx { background: rgba(47, 111, 176, .18); border-color: transparent; }

.thc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.thc-chip { flex: 1 1 130px; padding: 8px 12px; background: var(--thc-surface); border-radius: 10px; display: flex; flex-direction: column; }
.thc-chip__label { font-size: .75rem; color: var(--thc-muted); }
.thc-chip--elevated { background: rgba(226, 180, 0, .18); }
.thc-chip--critical { background: rgba(238, 127, 27, .22); }
.thc-chip--extreme { background: rgba(216, 65, 47, .22); }

.thc-firewx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container thc (min-width: 420px) { .thc-firewx { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.thc-incidents li { padding: 8px 0; border-top: 1px solid var(--thc-border); }
.thc-incidents li:first-child { border-top: 0; }
.thc-incident__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.thc-incident__where { font-size: .82rem; color: var(--thc-muted); }
.thc-mini { margin-top: 8px !important; font-size: .85rem; }
.thc-mini li { margin: 4px 0; }

/* ---------- Alerts ---------------------------------------------------------- */
.thc-alert {
	margin-bottom: 8px;
	background: var(--thc-bg);
	border: 1px solid var(--thc-border);
	border-left: 5px solid var(--thc-info);
	border-radius: 10px;
}

.thc-alert--extreme { border-left-color: #7f1d1d; }
.thc-alert--severe { border-left-color: var(--thc-bad); }
.thc-alert--moderate { border-left-color: var(--thc-orange); }
.thc-alert--minor { border-left-color: var(--thc-warn); }

.thc-alert summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	list-style: none;
}

.thc-alert summary::-webkit-details-marker { display: none; }
.thc-alert summary::marker { content: ""; }

.thc-alert__sev {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	font-size: .72rem;
	font-weight: 700;
	color: var(--thc-text);
	background: var(--thc-surface);
	border-radius: 999px;
}

.thc-alert--extreme .thc-alert__sev { color: #fff; background: #7f1d1d; }
.thc-alert--severe .thc-alert__sev { color: #fff; background: #b42318; }
.thc-alert--moderate .thc-alert__sev { color: #2b1200; background: rgba(238, 127, 27, .85); }
.thc-alert--minor .thc-alert__sev { background: rgba(226, 180, 0, .5); }

.thc-alert__main { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.thc-alert__main .thc-note { margin: 0; font-size: .78rem; }
.thc-alert__chev { color: var(--thc-muted); transition: transform .15s; }
.thc-alert[open] .thc-alert__chev { transform: rotate(180deg); }
.thc-alert__body { padding: 0 12px 12px; }

/* ---------- Footer -------------------------------------------------------- */
.thc-foot { margin-top: 16px; font-size: .78rem; color: var(--thc-muted); }
.thc-foot p { margin: 3px 0; }
.thc-foot__disc { margin-top: 8px !important; }

/* ---------- Layout variants ------------------------------------------------ */
.thc[data-layout="compact"] .thc-head { padding: 10px 14px; }
.thc[data-layout="compact"] .thc-hero { padding: 16px; }

@media print {
	.thc-head__tools, .thc-btn { display: none !important; }
	.thc-card { box-shadow: none; break-inside: avoid; }
}