/* Stage 21F - District Authority Canary */
.ss21f-district-snapshot,
.ss21f-district-snapshot *,
.ss21f-district-hierarchy,
.ss21f-district-hierarchy * { box-sizing: border-box; }

.ss21f-district-snapshot {
	--ss21f-green: #72d98b;
	--ss21f-green-dark: #287a42;
	--ss21f-ink: #101828;
	--ss21f-muted: #5c6b7e;
	width: min(var(--ss-ui-compact-max, 980px), calc(100% - 40px));
	margin: 30px auto 22px;
	padding: 24px;
	border: 1px solid #dce6ed;
	border-radius: 16px;
	background: linear-gradient(135deg, #fff 0%, #f8fcfa 100%);
	box-shadow: 0 10px 28px rgba(18,38,58,.045);
	font-family: var(--global-body-font-family, inherit);
}
.ss21f-district-snapshot__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 17px;
}
.ss21f-district-snapshot__head > div > span {
	display: block;
	margin-bottom: 5px;
	color: var(--ss21f-green-dark);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .085em;
	text-transform: uppercase;
}
.ss21f-district-snapshot__head h2 {
	margin: 0 !important;
	color: var(--ss21f-ink) !important;
	font-size: clamp(23px, 2.6vw, 32px) !important;
	line-height: 1.16 !important;
	letter-spacing: -.025em;
}
.ss21f-district-snapshot__head > p {
	margin: 0 !important;
	color: var(--ss21f-muted);
	font-size: 12px;
	white-space: nowrap;
}
.ss21f-district-snapshot__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 10px;
}
.ss21f-district-snapshot__metrics > div {
	padding: 15px 16px;
	border: 1px solid #e1e9ee;
	border-radius: 11px;
	background: #fff;
}
.ss21f-district-snapshot__metrics span {
	display: block;
	margin-bottom: 5px;
	color: #69778a;
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ss21f-district-snapshot__metrics strong {
	display: block;
	color: #111827;
	font-size: 20px;
	line-height: 1.2;
}
.ss21f-district-snapshot__note {
	margin: 16px 0 0 !important;
	padding-left: 13px;
	border-left: 2px solid rgba(0,220,123,.35);
	color: #5b697c;
	font-size: 13px;
	line-height: 1.6;
}
.ss21f-district-snapshot__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 11px 18px;
	margin-top: 16px;
}
.ss21f-district-snapshot__links a {
	color: var(--ss21f-green-dark) !important;
	font-size: 13.5px;
	font-weight: 750;
	text-decoration: none !important;
}
.ss21f-district-snapshot__links a:hover { text-decoration: underline !important; }
.ss21f-district-snapshot__links .ss21f-district-snapshot__primary {
	display: inline-flex;
	align-items: center;
	min-height: 41px;
	padding: 9px 14px;
	border: 1px solid var(--ss21f-green);
	border-radius: 8px;
	background: var(--ss21f-green);
	color: #07150f !important;
	text-decoration: none !important;
}
.ss21f-district-hierarchy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 22px 0 28px;
	padding: 17px 19px;
	border: 1px solid #dce6ed;
	border-radius: 12px;
	background: #f7faf9;
	color: #4f5e72;
	font-family: var(--global-body-font-family, inherit);
	font-size: 13.5px;
}
.ss21f-district-hierarchy strong { color: #111827; }
.ss21f-district-hierarchy a { color: #007a49 !important; font-weight: 750; }

@media (max-width: 700px) {
	.ss21f-district-snapshot {
		width: min(calc(100% - 24px), var(--ss-ui-compact-max, 980px));
		margin: 22px auto 18px;
		padding: 19px 16px;
	}
	.ss21f-district-snapshot__head { align-items: flex-start; flex-direction: column; gap: 7px; }
	.ss21f-district-snapshot__head > p { white-space: normal; }
	.ss21f-district-snapshot__metrics { grid-template-columns: 1fr; }
	.ss21f-district-hierarchy { align-items: flex-start; flex-direction: column; }
}


/* 1.0.117 - typography consistency with Warsaw data modules */
.ss21f-district-snapshot__head > div > span {
	font-size: 12px;
}
.ss21f-district-snapshot__head > p {
	font-size: 13px;
}
.ss21f-district-snapshot__metrics span {
	font-size: 12px;
}
.ss21f-district-snapshot__note {
	font-size: 14px;
}
.ss21f-district-snapshot__links a,
.ss21f-district-hierarchy {
	font-size: 14px;
}

@media (max-width: 700px) {
	.ss21f-district-snapshot {
		border-radius: 16px;
	}
	.ss21f-district-snapshot__head h2 {
		font-size: 27px !important;
	}
	.ss21f-district-snapshot__metrics > div {
		padding: 15px;
	}
	.ss21f-district-snapshot__links {
		align-items: stretch;
		flex-direction: column;
	}
	.ss21f-district-snapshot__links .ss21f-district-snapshot__primary {
		justify-content: center;
		width: 100%;
		min-height: 48px;
	}
}