/*
|||||||||||||||||||||||||||||||||
///  Dashboard Page Styles (dp-)  ///
|||||||||||||||||||||||||||||||||
*/

/* ---- Main Area ---- */

.dp-main {
	display: flex !important;
	flex-direction: column;
	min-height: 100vh;
	padding: 3rem 2rem !important;
}

.dp-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* ---- Group Header (matches lp-banner) ---- */

.dp-header {
	background-color: var(--sidebar);
	border-radius: var(--radius);
	padding: 1.5rem 0 3rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: relative;
	margin-bottom: 1.5rem;
	flex-shrink: 0;
	min-height: 170px;
}

.dp-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.dp-header__text {
	flex: 1;
	min-width: 0;
}

.dp-header__crumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.dp-header__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-inverse-subtle);
	font-size: 0.85rem;
	font-family: var(--font-sans);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.dp-header__back:hover {
	color: var(--text-inverse);
}

.dp-header__crumb-sep {
	font-size: 0.95rem;
	color: var(--text-inverse-muted);
}

.dp-header__label {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--dp-accent, rgba(255, 255, 255, 0.7));
	text-decoration: none;
	transition: color var(--transition-fast);
}

.dp-header__label:hover {
	color: var(--text-inverse);
}

.dp-header__title {
	font-family: var(--font-sans);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--text-inverse);
	line-height: 1.25;
	margin: 0;
	max-width: 650px;
}

.dp-header__visual {
	display: flex;
	gap: 24px;
	opacity: 0.15;
	font-size: 64px;
	color: var(--text-inverse);
	flex-shrink: 0;
}

/* ---- Data Body Wrapper ---- */

.dp-body {
	background-color: var(--card);
	border-radius: var(--radius);
	padding: 2rem 2rem;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	color: var(--card-foreground);
}

/* View-transition: card → dp-body expand */
@supports (view-transition-name: none) {
	.ris-vt-active .dp-body {
		view-transition-name: ris-data-card;
	}
}

/* Entrance animation for PJAX / non-view-transition */
.dp-body.ris-route-enter {
	opacity: 0;
	transform: scale(0.98) translateY(3px);
	border-radius: calc(var(--radius) * 1.1);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	will-change: opacity, transform, border-radius, box-shadow;
}

.dp-body.ris-route-enter-active {
	opacity: 1;
	transform: none;
	border-radius: var(--radius);
	box-shadow: none;
	transition:
		opacity 200ms cubic-bezier(0.34, 1.28, 0.64, 1),
		transform 240ms cubic-bezier(0.34, 1.28, 0.64, 1),
		border-radius 240ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Page Sub-header ---- */

.dp-subheader {
	margin-bottom: 0.85rem;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* Close button — collapses the "enlarged card" back to the landing grid.
   Reuses .dp-subheader__back so the existing reverse view-transition fires. */
.dp-card-close {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--muted);
	border: 1px solid var(--border);
	color: var(--muted-foreground);
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	z-index: 3;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}

.dp-card-close:hover {
	background: color-mix(in srgb, var(--dp-accent, var(--primary)) 12%, var(--muted));
	border-color: color-mix(in srgb, var(--dp-accent, var(--primary)) 45%, var(--border));
	color: var(--dp-accent, var(--primary));
	transform: rotate(90deg);
}

.dp-card-close:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

.dp-subheader__title {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--card-foreground);
	line-height: 1.2;
	margin: 0 0 0.85rem;
	padding-bottom: 0.7rem;
	padding-right: 3rem;
	position: relative;
}

.dp-subheader__badge-new {
	vertical-align: middle;
	margin-left: 0.6rem;
	margin-bottom: 0;
	background: #2e9e6b;
	color: #fff;
	transform: translateY(-2px);
}

.dp-subheader__moreinfo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
	font-weight: 700;
	color: var(--dp-accent, var(--primary));
	text-decoration: none;
	white-space: nowrap;
}

.dp-subheader__moreinfo:hover {
	text-decoration: underline;
}

.dp-subheader__moreinfo i {
	font-size: 0.75em;
}

/* Accent underline — a slim brand bar that replaces the old full-width accent block */
.dp-subheader__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 4px;
	border-radius: 999px;
	background: var(--dp-accent, var(--primary));
}

.dp-subheader__desc {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted-foreground);
	line-height: 1.55;
	margin: 0 0 0.85rem;
	max-width: 900px;
	padding-block: 0.85rem;
}

/* ---- View Tabs (card-style tiles) ----
   Echoes the type chips on the landing card so the page reads as the
   clicked card "enlarged". Each tile is an icon square + label and lights
   up in the section accent when active. (The legacy .dp-options__btn class
   is kept on each tile purely as a JS / view-transition hook.) */

.dp-viewtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.25rem 0 1.15rem;
	flex-shrink: 0;
}

.dp-viewtab {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-width: 110px;
	padding: 0.9rem 1.15rem;
	background: var(--card);
	border: 1.5px solid var(--border);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	color: var(--muted-foreground);
	cursor: pointer;
	line-height: 1;
	position: relative;
	transition:
		border-color var(--transition-fast),
		color var(--transition-fast),
		background var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.dp-viewtab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: calc(var(--radius) - 4px);
	background: var(--muted);
	border: 1px solid var(--border);
	color: var(--muted-foreground);
	font-size: 1.15rem;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.dp-viewtab__label {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.dp-viewtab:hover {
	border-color: color-mix(in srgb, var(--dp-accent, var(--primary)) 50%, var(--border));
	color: var(--card-foreground);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.dp-viewtab:hover .dp-viewtab__icon {
	color: var(--dp-accent, var(--primary));
	border-color: color-mix(in srgb, var(--dp-accent, var(--primary)) 35%, var(--border));
}

.dp-viewtab:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

.dp-viewtab.is-active {
	border-color: var(--dp-accent, var(--primary));
	color: var(--dp-accent, var(--primary));
	background: color-mix(in srgb, var(--dp-accent, var(--primary)) 7%, var(--card));
	box-shadow: 0 4px 14px color-mix(in srgb, var(--dp-accent, var(--primary)) 18%, transparent);
}

.dp-viewtab.is-active .dp-viewtab__icon {
	background: var(--dp-accent, var(--primary));
	border-color: var(--dp-accent, var(--primary));
	color: #fff;
}

/* Single-view pages: the lone tile is a status label, not an interactive switch */
.dp-viewtabs--single .dp-viewtab {
	cursor: default;
}

.dp-viewtabs--single .dp-viewtab:hover {
	transform: none;
}

/* ---- Embed Container ---- */

.dp-embed {
	flex: 1;
	min-height: clamp(300px, 45vh, 500px);
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, var(--muted), color-mix(in srgb, var(--muted) 75%, var(--card) 25%));
	transition:
		min-height 420ms cubic-bezier(0.34, 1.28, 0.64, 1),
		background-color 280ms ease-out,
		border-radius 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dp-embed.is-preloading {
	min-height: clamp(300px, 45vh, 500px);
	background:
		radial-gradient(130% 95% at 50% 42%, color-mix(in srgb, var(--dp-accent, var(--primary)) 14%, transparent), transparent 68%),
		linear-gradient(135deg, var(--muted), color-mix(in srgb, var(--muted) 75%, var(--card) 25%));
}

.dp-embed.is-loaded {
	min-height: 800px;
}

.dp-embed__inner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translateY(-4px);
	transform-origin: top center;
	transition:
		opacity 250ms cubic-bezier(0.34, 1.28, 0.64, 1),
		transform 340ms cubic-bezier(0.34, 1.28, 0.64, 1);
	will-change: transform, opacity;
}

.dp-embed.is-loaded .dp-embed__inner {
	opacity: 1;
	transform: none;
}

.dp-embed #tableauViz,
.dp-embed .dp-embed__arcgis {
	display: block;
	width: 100%;
	height: 100%;
}

.dp-embed .dp-embed__arcgis {
	border: 0;
}

.dp-embed__loader {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1.15rem;
	padding: 1.25rem;
	pointer-events: none;
	opacity: 1;
	transition: opacity 220ms ease-out;
	z-index: 1;
}

.dp-embed.is-loaded .dp-embed__loader {
	opacity: 0;
}

/* Bar-chart skeleton — columns plot themselves in the section accent so the
   wait reads as "your data is being charted," not a generic spinner. */
.dp-embed__loader-chart {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	height: 64px;
}

.dp-embed__loader-col {
	width: 15px;
	height: 100%;
	border-radius: 3px 3px 2px 2px;
	transform: scaleY(0.35);
	transform-origin: bottom;
	background: var(--dp-accent, var(--primary));
	animation: dpLoaderPlot 1.5s ease-in-out infinite;
}

.dp-embed__loader-col:nth-child(2) {
	animation-delay: 0.17s;
}

.dp-embed__loader-col:nth-child(3) {
	animation-delay: 0.34s;
}

.dp-embed__loader-col:nth-child(4) {
	animation-delay: 0.51s;
}

.dp-embed__loader-col:nth-child(5) {
	animation-delay: 0.68s;
}

.dp-embed__loader-label {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: color-mix(in srgb, var(--dp-accent, var(--primary)) 65%, var(--muted-foreground));
}

@keyframes dpLoaderPlot {
	0%,
	100% {
		transform: scaleY(0.35);
		opacity: 0.55;
	}
	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-embed__loader-col {
		animation: none;
		transform: scaleY(0.7);
	}
}

/* ---- Custom Embed Content (tables, profile pickers, etc.) ---- */

.dp-custom-embed {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---- Profile Picker (speed-profiles, ddi-trends, age-dependency) ---- */

.dp-profile-picker {
	display: block;
	flex: 0 0 auto;
	margin-top: 0.25rem;
	padding: 1.15rem 1.25rem;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--secondary) 86%, #ffffff 14%)), var(--secondary);
	border: 1px solid color-mix(in srgb, var(--border) 76%, var(--dp-accent, var(--primary)) 24%);
	border-radius: calc(var(--radius) + 6px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.86),
		0 10px 26px rgba(15, 23, 42, 0.05);
	position: relative;
	overflow: visible;
}

.dp-profile-picker::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	width: auto;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dp-accent, var(--primary)), color-mix(in srgb, var(--dp-accent, var(--primary)) 32%, transparent));
	opacity: 0.75;
}

.dp-profile-picker__body {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.dp-profile-picker__eyebrow {
	font-family: var(--font-sans);
	font-size: 0.76rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--dp-accent, var(--primary));
	margin-bottom: 0.45rem;
}

.dp-profile-picker__heading {
	font-family: var(--font-sans);
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--card-foreground);
	margin: 0;
}

.dp-profile-picker__note {
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--muted-foreground);
	margin: 0.35rem 0 0.95rem;
	max-width: 34rem;
}

.dp-profile-picker__controls {
	display: flex;
	align-items: end;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.dp-profile-picker__select {
	flex: 0 1 380px;
	min-width: 240px;
	max-width: 420px;
}

.dp-profile-picker__label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.15px;
	color: color-mix(in srgb, var(--card-foreground) 82%, var(--muted-foreground) 18%);
	margin: 0 0 0.4rem;
}

.dp-profile-picker .ris-select-wrap {
	width: 100%;
}

.dp-profile-picker .ris-select-btn {
	width: 100% !important;
	background: #ffffff;
	border-color: color-mix(in srgb, var(--input) 72%, var(--dp-accent, var(--primary)) 28%);
}

.dp-profile-picker__actions {
	display: flex;
	align-items: end;
	flex: 0 0 auto;
}

.dp-profile-picker__download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.82rem 1.05rem;
	min-height: 44px;
	width: auto;
	min-width: 0;
	max-width: fit-content;
	justify-content: center;
	white-space: nowrap;
	background: var(--dp-accent, var(--primary));
	color: var(--text-inverse);
	border: 1px solid color-mix(in srgb, var(--dp-accent, var(--primary)) 74%, #000000 26%);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--dp-accent, var(--primary)) 22%, transparent);
	z-index: 1;
	transition:
		transform var(--transition-fast),
		box-shadow var(--transition-fast),
		opacity var(--transition-fast);
}

.dp-profile-picker__download:hover {
	opacity: 0.95;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--dp-accent, var(--primary)) 32%, transparent);
	color: var(--text-inverse);
}

.dp-profile-picker__download i {
	color: #fff;
}

.dp-profile-picker__download:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

/* ---- Local Government Table Area ---- */

.dp-local-gov {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}

.dp-local-gov__selector {
	margin-bottom: 0.5rem;
}

/* ---- DDI panel (switch-bar layout, matches housing sub-data pages) ---- */

/* Tabs are anchors (real, shareable URLs) but must read as tabs, not links —
   drop the underline; the active state is the accent bar from .dp-switch__btn::after. */
.dp-switch__btn,
.dp-switch__btn:hover,
.dp-switch__btn:focus,
.dp-switch__btn:visited {
	text-decoration: none;
}

.dp-ddi-panel .dp-panel__body {
	padding: 1.5rem 2rem;
}

.dp-ddi-content {
	flex: 1;
	min-height: 0;
}

/* In-place view swap: dim the body briefly while the next view loads. */
.dp-ddi-panel.is-ddi-loading .dp-panel__body {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* The legacy content wrappers default to display:none (shown via old tab JS)
   and carry a 65px header offset. In the panel the active view is always the
   one in the DOM, so force it visible and drop the offset. */
.dp-ddi-content .content-container {
	display: block !important;
	padding-top: 0;
}

/* The hidden attribute must win over .dp-panel__actions' display:inline-flex
   (Open is shown only on the Map view). */
.dp-panel__actions[hidden] {
	display: none;
}

/* Prose baseline for DDI content (Profiles, fallbacks). The Overview view is
   the .ddi-explainer infographic below and sets its own type. */
.dp-ddi-content p {
	font-family: var(--font-sans);
	line-height: 1.6;
	color: var(--card-foreground);
}

.dp-ddi-unavailable {
	padding: 2rem 0;
	font-family: var(--font-sans);
	color: var(--muted-foreground);
}

/* County picker mount: collapses to nothing on views that don't inject one
   (Overview / Map), and gets breathing room below it on the Profiles view. */
.dp-ddi-content .drop-down-holder:empty {
	display: none;
}

.dp-ddi-content .drop-down-county {
	margin-bottom: 1.25rem;
}

/* DDI Map view: the legacy map container uses negative margins / absolute
   positioning to tuck under an old page header that the panel layout doesn't
   have. Neutralise them so the map sits cleanly in the panel body, and give it
   a sensible height. */
.dp-ddi-panel .content-container-map {
	overflow: visible;
}

.dp-ddi-panel .map-holder,
.dp-ddi-panel .map-holder iframe {
	margin: 0;
	min-height: 70vh;
}

/* ============================================================
   DDI Overview & Profile — styled after the printed 2024 profile
   so the on-site explainer reads as a companion to the PDF.
   Language lifted from that artifact: dark slate section bars,
   warm cream/sand cards, a measured score ruler, the page amber
   as the gold accent. The research text is preserved verbatim.
   ============================================================ */

.dp-ddi-content {
	--pdf-slate: #454b57;
	--pdf-cream: #f5efe2;
	--pdf-cream-edge: #ddd0b5;
	--pdf-gold: #e8a44a; /* page accent — graphics / on-dark */
	--pdf-gold-lt: #d9b572; /* lighter gold for text on slate */
	--pdf-gold-ink: #9a6a14; /* darkened amber, ≥4.5:1 on light */
}

.ddi-overview {
	color: var(--card-foreground);
}

.ddi-overview__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--card-foreground);
	margin: 0 0 1.1rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--border-muted);
}

.ddi-overview p {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.72;
	color: var(--card-foreground);
	margin: 0 0 1.15rem;
}
.ddi-overview strong {
	font-weight: 700;
	color: var(--card-foreground);
}

.ddi-overview p.ddi-overview__lead {
	font-size: 1.08rem;
	line-height: 1.6;
	max-width: 70ch;
}

/* ---- Two columns: the explanation beside a real profile ---- */

.ddi-overview__grid {
	display: grid;
	gap: 1.8rem;
	margin-top: 1.5rem;
}
.ddi-overview__main > :last-child {
	margin-bottom: 0;
}

@media (min-width: 1080px) {
	.ddi-overview__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: start;
	}
	.ddi-overview__main {
		grid-column: 1;
		grid-row: 1;
	}
	.ddi-overview__aside {
		grid-column: 2;
		grid-row: 1;
	}
	.ddi-overview__aside-inner {
		position: sticky;
		top: 1rem;
	}
}

/* Framed sample profile — shared by the overview aside and the download pane */
.ddi-sample {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--pdf-cream-edge);
	background: var(--pdf-cream);
	box-shadow: 0 12px 30px -16px rgba(29, 41, 57, 0.55);
}
.ddi-sample img {
	display: block;
	width: 100%;
	height: auto;
}
.ddi-sample figcaption {
	padding: 0.5rem 0.75rem;
	font-family: var(--font-sans);
	font-size: 0.76rem;
	color: var(--muted-foreground);
	text-align: center;
	border-top: 1px solid var(--pdf-cream-edge);
}

.ddi-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 0.9rem;
	padding: 0.72rem 1rem;
	background: var(--pdf-slate);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	border-radius: 8px;
	transition: background var(--transition-fast);
}
.ddi-cta i {
	color: var(--pdf-gold-lt);
}
.ddi-cta:hover {
	background: #353b46;
}
.ddi-cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ring);
}

/* ---- The two scores: slate bar + cream body (profile sections) ---- */

.ddi-score-section {
	margin: 0 0 1.3rem;
	border: 1px solid color-mix(in srgb, var(--border-muted) 50%, transparent);
	border-radius: 10px;
	overflow: hidden;
}
.ddi-score-section__bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.62rem 1rem;
	background: var(--pdf-slate);
}
.ddi-score-section__bar i {
	color: var(--pdf-gold-lt);
	font-size: 0.95rem;
}
.ddi-score-section__name {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}
.ddi-score-section__tag {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #2a2e36;
	background: var(--pdf-gold);
	padding: 0.12rem 0.5rem;
	border-radius: 5px;
}
.ddi-score-section__body {
	background: var(--card);
	padding: 1rem 1.15rem;
}
.ddi-score-section__body p {
	margin: 0;
}

/* ---- The combined score — a standalone pill equation, then the explanation ---- */

.ddi-combine {
	margin: 0.25rem 0 1.5rem;
}
.ddi-combine__formula {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
}
.ddi-combine__chip {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: #2a2e36;
	background: var(--pdf-gold);
	padding: 0.28rem 0.7rem;
	border-radius: 6px;
}
.ddi-combine__op {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--pdf-slate);
}
.ddi-combine__result {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--pdf-slate);
	padding: 0.3rem 0.85rem;
	border-radius: 6px;
}
.ddi-combine p {
	margin: 0;
}

/* ---- Caveat ---- */

.ddi-overview p.ddi-overview__caveat {
	font-size: 0.9rem;
	color: var(--muted-foreground);
	border-top: 1px solid var(--border-muted);
	padding-top: 1.1rem;
	margin-bottom: 0;
}

/* ============================================================
   DDI Profile — two-pane download (Profiles view)
   Sample profile on one side, the selected county's download on
   the other, so the page reads as picking up the printed report.
   ============================================================ */

.ddi-profile {
	max-width: 760px;
}

.ddi-profile-pick {
	display: grid;
	gap: 1.6rem;
	align-items: start;
}
@media (min-width: 620px) {
	.ddi-profile-pick {
		grid-template-columns: 210px 1fr;
	}
}

.ddi-profile-pick__eyebrow {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pdf-gold-ink);
	margin: 0 0 0.15rem;
}
.ddi-profile-pick__county {
	font-family: var(--font-display);
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--card-foreground);
	margin: 0 0 1rem;
}
.ddi-profile-pick__intro {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--muted-foreground);
	margin: 0 0 0.65rem;
}
.ddi-profile-pick__list {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}
.ddi-profile-pick__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--card-foreground);
	padding: 0.45rem 0;
	border-top: 1px solid color-mix(in srgb, var(--pdf-cream-edge) 70%, transparent);
}
.ddi-profile-pick__list li:first-child {
	border-top: none;
}
.ddi-profile-pick__list i {
	flex: 0 0 1.3rem;
	margin-top: 0.16rem;
	text-align: center;
	font-size: 0.9rem;
	color: var(--pdf-gold-ink);
}

.ddi-profile-pick__dl {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	text-decoration: none;
}
.ddi-profile-pick__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	background: var(--pdf-slate);
	padding: 0.68rem 1.2rem;
	border-radius: 8px;
	transition: background var(--transition-fast);
}
.ddi-profile-pick__btn i {
	color: var(--pdf-gold-lt);
}
.ddi-profile-pick__dl:hover .ddi-profile-pick__btn {
	background: #353b46;
}
.ddi-profile-pick__dl:focus-visible {
	outline: none;
}
.ddi-profile-pick__dl:focus-visible .ddi-profile-pick__btn {
	box-shadow: 0 0 0 3px var(--ring);
}
.ddi-profile-pick__ft {
	font-family: var(--font-sans);
	font-size: 0.76rem;
	color: var(--muted-foreground);
}

/* ---- County picker on the Profiles view: white background, wider ---- */
.dp-ddi-content .drop-down-county {
	width: 100%;
	max-width: 360px;
}
.dp-ddi-content .drop-down-county .ris-select-wrap {
	width: 100%;
	max-width: 360px;
}
.dp-ddi-content .drop-down-county .ris-select-btn {
	width: 100% !important; /* beat the inline data-width set by addCountyDropdowns */
	background: var(--card);
}
.dp-ddi-content .drop-down-county .ris-select-btn:hover {
	background: var(--secondary);
}

.ddi-profile__empty {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.4rem 1.5rem;
	background: var(--secondary);
	border: 1px solid var(--border-muted);
	border-radius: var(--radius);
	max-width: 520px;
}
.ddi-profile__empty i {
	font-size: 1.4rem;
	color: var(--muted-foreground);
}
.ddi-profile__empty p {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted-foreground);
}

/* ---- On the sample image inside the download pane, cap its height so the
       pane stays balanced on wide screens ---- */
@media (min-width: 620px) {
	.ddi-sample--profile {
		align-self: start;
	}
}

/* ---- One short, calm entrance ---- */
@media (prefers-reduced-motion: no-preference) {
	.ddi-overview__title,
	.ddi-overview__lead,
	.ddi-overview__grid,
	.ddi-profile-pick,
	.ddi-profile__empty {
		opacity: 0;
		animation: ddiRise 0.5s cubic-bezier(0.34, 1.28, 0.64, 1) forwards;
	}
	.ddi-overview__lead {
		animation-delay: 0.07s;
	}
	.ddi-overview__grid {
		animation-delay: 0.14s;
	}
}

@keyframes ddiRise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- CVI Overview Content ---- */

.dp-overview {
	display: none;
	padding: 2rem 2.5rem;
	background: var(--card);
	border-radius: var(--radius);
	color: var(--card-foreground);
}

.dp-overview.is-visible {
	display: block;
}

.dp-overview h3 {
	font-family: var(--font-sans);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--card-foreground);
	margin: 0 0 1rem;
}

.dp-overview h4 {
	font-family: var(--font-sans);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--card-foreground);
	margin: 1.5rem 0 0.75rem;
}

.dp-overview p {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--card-foreground);
	margin: 0 0 1rem;
}

.dp-overview ul {
	margin: 0.5rem 0 1rem 1.25rem;
	padding: 0;
}

.dp-overview li {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--card-foreground);
}

.dp-overview a {
	color: var(--primary);
	text-decoration: underline;
}

.dp-overview hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1.5rem 0;
}

.dp-overview img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.dp-overview table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

.dp-overview th,
.dp-overview td {
	font-family: var(--font-sans);
	font-size: 1rem;
	padding: 0.625rem 1rem;
	text-align: left;
	border: 1px solid var(--border);
}

.dp-overview th {
	background: var(--muted);
	font-weight: 700;
}

.dp-overview .dp-overview__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.dp-overview__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--primary);
	color: var(--primary-foreground);
	border: none;
	border-radius: var(--radius);
	padding: 0.82rem 1.05rem;
	font-family: var(--font-sans);
	font-size: 1rem;
	min-width: 220px;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-fast);
	margin-top: 0.5rem;
}

.dp-overview__btn:hover {
	background: var(--accent-foreground);
	color: var(--text-inverse);
}

/* ---- Responsive ---- */

@media only screen and (max-width: 1024px) {
	.dp-content {
		padding: 18px;
	}

	.dp-header {
		padding: 32px 28px;
		min-height: 140px;
	}

	.dp-header__title {
		font-size: 1.3rem;
	}

	/* Drop the faint decorative watermark icon on tablet/phone — it steals
	   horizontal space from the flex row and squeezes the title/breadcrumb
	   into a narrow, over-wrapped column. Mirrors .lp-banner__visual, which
	   hides at this same breakpoint, so both header styles stay consistent. */
	.dp-header__visual {
		display: none;
	}

	.dp-banner {
		padding: 1.5rem 1.75rem 1.25rem;
	}

	.dp-banner__title {
		font-size: 1.3rem;
	}

	.dp-overview .dp-overview__grid {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 768px) {
	.dp-content {
		padding: 14px;
	}

	.dp-header {
		padding: 28px 22px;
		min-height: 120px;
	}

	.dp-header__title {
		font-size: 1.15rem;
	}

	.dp-banner {
		padding: 1.25rem 1.25rem 1rem;
	}

	.dp-banner__title {
		font-size: 1.15rem;
	}

	.dp-viewtabs {
		gap: 0.5rem;
	}

	.dp-viewtab {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.7rem 0.6rem;
	}

	.dp-viewtab__icon {
		width: 38px;
		height: 38px;
		font-size: 1rem;
	}

	.dp-viewtab__label {
		font-size: 0.78rem;
	}

	.dp-profile-picker__select {
		width: 100%;
		min-width: 0;
	}

	.dp-profile-picker__actions {
		width: 100%;
	}

	.dp-profile-picker__download {
		width: 100%;
		max-width: none;
		justify-content: center;
	}
}

@media only screen and (max-width: 980px) {
	.dp-profile-picker {
		padding: 0.9rem;
	}

	.dp-profile-picker__controls {
		align-items: stretch;
	}
}

/*
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
///  Data Panel — switcher + embed as one object (dp-panel)  ///
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
   The view switcher and the Tableau/embed share a single bordered card so
   the embed reads as belonging to its bar: underline tabs on top, a rounded
   inset viewport below with breathing room around it. A single/zero-view
   embed swaps the tabs for a slim framed header (.dp-panel--single).
*/

.dp-panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: var(--card);
	border: 1px solid color-mix(in srgb, var(--dp-accent, var(--primary)) 20%, var(--border-muted));
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
}

.dp-panel__bar {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
	padding: 0 0.9rem;
	background: var(--card);
	border-bottom: 1px solid color-mix(in srgb, var(--dp-accent, var(--primary)) 20%, var(--border-muted));
	flex-shrink: 0;
}

.dp-panel__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background-color: #fafbfd;
}

/* Embed sits as a rounded inset viewport with 1.5rem of breathing room. */
.dp-panel .dp-embed {
	margin: 1.5rem;
	border: none;
}

/* ---- Switch — underline tabs ---- */

.dp-switch {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
}

.dp-switch__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1;
	font-family: var(--font-sans);
	background: none;
	border: none;
	color: var(--muted-foreground);
	padding: 0.95rem 0.35rem;
	margin-right: 1.5rem;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.dp-switch__btn:last-of-type {
	margin-right: 0;
}

.dp-switch__label {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Neutralise the legacy big-icon-square styling for the inline switch icon
   (the .dp-viewtab__icon hook is kept for the card→page view-transition). */
.dp-switch .dp-viewtab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 1rem;
	color: inherit;
	transition: color var(--transition-fast);
}

.dp-switch__btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: transparent;
	transition: background var(--transition-fast);
}

.dp-switch__btn:hover {
	color: var(--card-foreground);
}

.dp-switch__btn.is-active {
	color: var(--dp-accent, var(--primary));
}

.dp-switch__btn.is-active::after {
	background: var(--dp-accent, var(--primary));
}

.dp-switch__btn.is-active .dp-viewtab__icon {
	color: var(--dp-accent, var(--primary));
}

.dp-switch__btn:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

/* ---- Single / zero view ----
   The bar matches the multi-view switch bar exactly — same white card
   background and same horizontal padding (inherited from .dp-panel__bar). The
   view-type tag below supplies the matching bar height via the same vertical
   rhythm as .dp-switch__btn, so single- and multi-view titlebars line up. */

.dp-panel__caption {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--card-foreground);
}

.dp-panel__caption::before {
	content: "";
	width: 4px;
	height: 1.05em;
	border-radius: 999px;
	background: var(--dp-accent, var(--primary));
}

/* View-type tag: labels what the single view is (Map / Dashboard) instead of
   repeating the H2 title. A quiet utility tag, not a clickable tab — the icon
   carries the accent, so the leading tick is dropped. */
.dp-panel__caption--viewtype {
	gap: 0.45rem;
	/* Match .dp-switch__btn's vertical padding so the bar height equals the
	   multi-view switch bar. */
	padding: 0.95rem 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

.dp-panel__caption--viewtype::before {
	display: none;
}

.dp-panel__caption--viewtype i {
	font-size: 0.95rem;
	color: var(--dp-accent, var(--primary));
}

/* ---- Toolbar action (Open in new window) ---- */

.dp-panel__actions {
	margin-left: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.dp-panel__action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);
	color: var(--muted-foreground);
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.dp-panel__action:hover {
	color: var(--dp-accent, var(--primary));
	border-color: color-mix(in srgb, var(--dp-accent, var(--primary)) 45%, var(--border));
	background: color-mix(in srgb, var(--dp-accent, var(--primary)) 8%, transparent);
}

.dp-panel__action:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

.dp-panel__action i {
	font-size: 0.85em;
}

/* ---- Responsive ---- */

@media only screen and (max-width: 768px) {
	.dp-panel__bar {
		padding: 0 0.6rem;
	}

	.dp-switch__label {
		font-size: 0.8rem;
	}

	.dp-switch__btn {
		margin-right: 1rem;
	}

	.dp-panel .dp-embed {
		margin: 1rem;
	}

	.dp-panel__action span {
		display: none;
	}

	.dp-panel__action {
		padding: 0.45rem 0.55rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-switch__btn,
	.dp-switch .dp-viewtab__icon,
	.dp-switch__btn::after,
	.dp-panel__action {
		transition: none;
	}
}

/* ============================================================
   Fiscal · Local Government table — minimal light theme
   Scoped to .dp-local-gov. Subtle borders, no shadows, no fills
   except a light blue-gray on the header tabs; no zebra striping;
   first column left-aligned. Overrides the site-wide dark table
   rules from styles.css.
   ============================================================ */

.dp-local-gov {
	--lg-tab-bg: #eef1f7; /* light blue-gray header tabs */
	--lg-band-bg: #f4f6fa; /* section bands */
	--lg-line: #d0d5dd; /* subtle borders */
	--lg-ink: #1d2939;
	--lg-muted: #6a788d;
}

/* Container: flat, subtle frame, no shadow */
.dp-local-gov .table-holder {
	border-radius: 8px;
	box-shadow: none !important;
	background: #fff;
	border: none !important;
	padding-top: 0px !important;
	margin-top: 0px !important;
}

/* In-place county switch: briefly dim the table while the new data loads.
   Only the table updates — the surrounding panel stays put (no refresh/bounce). */
.dp-local-gov .table-holder.is-lg-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* County-name header row → light blue-gray tab */
.dp-local-gov .table-holder .data-header th,
.dp-local-gov .table-holder .data-header td,
.dp-local-gov .table-holder .empty-cell {
	background: none !important;
	color: var(--lg-ink) !important;
	border-bottom: 1px solid var(--lg-line) !important;
	box-shadow: none !important;
}

.dp-local-gov .table-holder .data-header th span {
	color: var(--lg-ink) !important;
	font-weight: 600;
}

/* Total / Per Person / Percentile sub-headers → same tab tone, muted labels */
.dp-local-gov .table-holder .data-sub-header {
	background: var(--lg-tab-bg) !important;
	border-color: var(--lg-line) !important;
	border-bottom: 1px solid var(--lg-line) !important;
}

.dp-local-gov .table-holder .data-sub-header,
.dp-local-gov .table-holder .data-sub-header span,
.dp-local-gov .table-holder .data-sub-header i {
	color: var(--lg-muted) !important;
	text-transform: uppercase;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
}

/* Comparison sub-headers → same as primary (drop the darker variant) */
.dp-local-gov .table-holder .compare-color {
	background: var(--lg-tab-bg) !important;
	border-color: var(--lg-line) !important;
}

.dp-local-gov .table-holder .compare-color,
.dp-local-gov .table-holder .compare-color span,
.dp-local-gov .table-holder .compare-color i {
	color: var(--lg-muted) !important;
}

/* Section bands (Fiscal Measures, Revenue Capacity Index, …) → light band, left-aligned */
.dp-local-gov .table-holder .full-head-row,
.dp-local-gov .table-holder .header-row {
	background: var(--lg-band-bg) !important;
	color: var(--lg-ink) !important;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

.dp-local-gov .table-holder .full-head-row th,
.dp-local-gov .table-holder .header-row th {
	text-align: left;
	padding-left: 25px;
}

.dp-local-gov .table-holder .full-head-row span,
.dp-local-gov .table-holder .header-row span {
	color: var(--lg-ink) !important;
}

/* Data rows → white, no zebra, no hover fill; subtle row separators */
.dp-local-gov .table-holder .data-row,
.dp-local-gov .table-holder .data-row:nth-child(odd),
.dp-local-gov .table-holder .data-row:nth-child(even) {
	background: #fff !important;
	border-bottom: 1px solid var(--lg-line);
}

.dp-local-gov .table-holder .data-row:hover {
	background: #fff !important;
}

/* First column (row labels) → left-aligned, subtle weight */
.dp-local-gov .table-holder .data-row th {
	text-align: left;
	color: var(--lg-ink) !important;
	font-weight: 500;
	border: 1px solid var(--lg-line);
}

/* Cell dividers → subtle */
.dp-local-gov .table-holder .data-cell {
	border-left: 1px solid var(--lg-line);
	border-right: 1px solid var(--lg-line);
	color: #3e5573 !important;
	font-weight: 600 !important;
	font-size: clamp(1rem, 1.4vw, 1rem) !important;
}

/* Row-label info icons → muted (no accent) */
.dp-local-gov .table-holder .data-title i.fa-info-circle {
	color: var(--lg-muted);
	padding-left: 6px;
}

/* In-table reference links ("Defining Rural Indiana") → Fiscal accent blue
   (#56bdde), darkened along the same hue to #3a7f95 so it clears WCAG AA
   (4.5:1 on the white cell). */
.dp-local-gov .table-holder a,
.dp-local-gov .table-holder a.table-cell-link {
	color: #3a7f95 !important;
}

.dp-local-gov .table-holder a:hover,
.dp-local-gov .table-holder a.table-cell-link:hover {
	color: #316b80 !important;
}

/* ---- County selectors (minimal) ---- */
/* position + z-index so the open dropdown panels stack above the table
   (.table-holder sets position:relative; z-index:998 in styles.css). */
.dp-local-gov__selector {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 0.5rem;
	position: relative;
	z-index: 1000;
}

/* A touch wider than the default ris-select wrap (min(100%, 360px)). */
.dp-local-gov__selector .ris-select-wrap {
	width: min(100%, 420px);
}

/* These labels are <h3>s inside #ris-main-content, which forces the Bitter
   display font via an ID-specificity rule — use !important to keep Open Sans. */
.dp-local-gov__selector .drop-down-county h3 {
	margin: 0 0 0.4rem;
	font-family: var(--font-sans) !important;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--lg-muted);
}

.dp-local-gov__selector .ris-select-btn {
	background: #fff;
	border-color: var(--input);
	box-shadow: none;
}

.dp-local-gov__selector .ris-select-btn:hover {
	background: var(--lg-tab-bg);
	border-color: var(--border-muted);
}

.dp-local-gov__selector .ris-select-btn:focus-visible {
	border-color: var(--ring);
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent);
}