/* /Components/Layout/MainLayout.razor.rz.scp.css */
.lt-sticky-bar[b-tmacj0ytkq] {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	background-color: var(--mud-palette-surface);
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lt-sticky-bar[b-tmacj0ytkq]  .kpi {
	flex: 1;
	min-width: 0;
}

.lt-sticky-bar[b-tmacj0ytkq]  .kpi:last-child {
	border-right: none;
}

.lt-sticky-bar[b-tmacj0ytkq]  .mud-paper {
	height: 100%;
}

/* Below md four cards can't share the width without their values and "View" badges
   colliding, so the row becomes a snap carousel: each card takes most of the viewport and the
   next one peeks in as the affordance. */
@media (max-width: 959.98px) {
	.lt-sticky-bar[b-tmacj0ytkq] {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
	}

	.lt-sticky-bar[b-tmacj0ytkq]  .kpi {
		flex: 0 0 72vw;
		scroll-snap-align: start;
	}
}

.appbar-title[b-tmacj0ytkq] {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.appbar-title-main[b-tmacj0ytkq] {
	font-family: var(--lt-font-display);
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.appbar-title-sub[b-tmacj0ytkq] {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.62);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

/* Overflow trigger ("37 Counties"). Anchors the popover and inherits the slot
   typography from its wrapping span, so it matches either the title or subtitle. */
.appbar-names-anchor[b-tmacj0ytkq] {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.appbar-names-trigger[b-tmacj0ytkq] {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
}

.appbar-names-trigger:hover[b-tmacj0ytkq] {
	opacity: 0.82;
}

.appbar-names-caret[b-tmacj0ytkq] {
	font-size: 1.1em;
}
/* /Components/Layout/NavDrawerContent.razor.rz.scp.css */
.nav-logo a[b-iv486u69qj] {
	border-bottom: none;
	display: block;
}

.nav-logo[b-iv486u69qj] {
	padding: 22px 22px 20px;
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* .mud-drawer--closed is on the parent MudDrawer. Scoped CSS only stamps the scope
   attribute onto the last selector segment, so an outside ancestor still matches. */
.mud-drawer--closed .nav-logo[b-iv486u69qj] {
	padding: 12px 10px 10px;
}

.nav-logo-full[b-iv486u69qj] {
	width: 86%;
	display: block;
	margin: 0 auto;
}

.nav-logo-icon[b-iv486u69qj] {
	width: 40px;
	padding: 4px 0;
	display: block;
	margin: 0 auto;
}
/* /Components/Pages/AboutTheData.razor.rz.scp.css */
/* Anchor targets have to clear the fixed app bar, or a deep link lands with its heading hidden
   underneath it. 64px bar + breathing room. */
.atd-section[b-0yro885quk],
.atd-def[b-0yro885quk] {
	scroll-margin-top: 88px;
}

/* ---- Left column ---------------------------------------------------------- */
/* The right column is far taller, so search, contents, and the standing notes travel with the
   reader as one panel. */
/* LeftSidebar's StickyLeft gives the column the row's height; this is what travels within it. On a
   short viewport the panel scrolls inside itself rather than losing its bottom off the screen. */
.atd-sticky[b-0yro885quk] {
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 104px);
	overflow-y: auto;
}

.atd-search[b-0yro885quk] {
	margin-bottom: 6px;
}

/* MudText renders its own element, which carries its own isolation scope — the wrapper is what
   these rules can reach. Color inherits into the typography; spacing stays out here. */
.atd-count[b-0yro885quk] {
	color: var(--mud-palette-text-secondary);
	margin-bottom: 14px;
}

/* Group headings inside the panel — Sections, Grain marks, Reporting period. */
.atd-group[b-0yro885quk] {
	letter-spacing: 0.08em;
	color: var(--mud-palette-text-secondary);
	margin-bottom: 4px;
}

.atd-jump[b-0yro885quk] {
	display: flex;
	flex-direction: column;
}

.atd-jump__link[b-0yro885quk] {
	padding: 8px 2px;
	font-size: 0.9375rem;
	color: var(--mud-palette-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--mud-palette-divider);
}

.atd-jump__link:last-child[b-0yro885quk] {
	border-bottom: none;
}

.atd-jump__link:hover[b-0yro885quk] {
	color: var(--mud-palette-primary);
}

/* Set from JS as the reader scrolls — see AboutTheData.razor.js. Weight only, so the nav doesn't
   shift sideways as the highlight moves. */
.atd-jump__link--active[b-0yro885quk] {
	font-weight: 700;
	color: var(--mud-palette-primary);
}

/* Filtered out entirely — kept in place so the nav doesn't reflow as you type. */
.atd-jump__link--empty[b-0yro885quk] {
	opacity: 0.4;
	pointer-events: none;
}

/* ---- Grain marks legend --------------------------------------------------- */
.atd-marks[b-0yro885quk] {
	display: grid;
	gap: 6px;
}

.atd-mark[b-0yro885quk] {
	display: grid;
	grid-template-columns: 84px 1fr;
	align-items: center;
	gap: 10px;
}

.atd-mark[b-0yro885quk]  .mud-chip {
	justify-content: center;
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Grain explainer ------------------------------------------------------ */
.atd-grains[b-0yro885quk] {
	display: grid;
	gap: 12px;
}

.atd-grain[b-0yro885quk] {
	display: grid;
	grid-template-columns: 110px 1fr;
	align-items: start;
	gap: 12px;
}

/* ---- Definition list ----------------------------------------------------- */
.atd-defs[b-0yro885quk] {
	display: grid;
	gap: 20px;
	margin: 0;
}

/* Prose in the main column, attribution in a rail beside it. The rail is fixed-width so every
   SOURCE label lines up down the page. */
.atd-def[b-0yro885quk] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	column-gap: 24px;
}

.atd-def + .atd-def[b-0yro885quk] {
	padding-top: 20px;
	border-top: 1px solid var(--mud-palette-divider);
}

.atd-def__head[b-0yro885quk] {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.atd-def__head[b-0yro885quk]  .mud-chip {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.atd-def__term[b-0yro885quk] {
	font-family: var(--lt-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mud-palette-text-primary);
}

/* Per-definition permalink. Faint until the row is hovered, so 28 of these don't add up to noise. */
.atd-def__anchor[b-0yro885quk] {
	color: var(--mud-palette-text-secondary);
	text-decoration: none;
	font-weight: 700;
	opacity: 0;
	transition: opacity 120ms;
}

.atd-def:hover .atd-def__anchor[b-0yro885quk],
.atd-def__anchor:focus-visible[b-0yro885quk] {
	opacity: 1;
}

.atd-def__body[b-0yro885quk] {
	grid-column: 1;
	margin: 0;
}

.atd-def__meta[b-0yro885quk] {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	display: grid;
	align-content: start;
	gap: 2px;
	margin: 0;
	padding-left: 16px;
	border-left: 1px solid var(--mud-palette-divider);
}

.atd-meta__label[b-0yro885quk] {
	letter-spacing: 0.08em;
	color: var(--mud-palette-text-secondary);
}

/* Every label after the first needs air between it and the block above. */
.atd-meta__label:not(:first-child)[b-0yro885quk] {
	margin-top: 10px;
}

.atd-meta__value[b-0yro885quk] {
	color: var(--mud-palette-text-secondary);
}

.atd-def__link[b-0yro885quk] {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--mud-palette-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.atd-def__link:hover[b-0yro885quk] {
	border-bottom-color: currentColor;
}

/* The rail has nowhere to sit on a narrow card — it becomes a footer instead. */
@media (max-width: 959.98px) {
	.atd-def[b-0yro885quk] {
		grid-template-columns: minmax(0, 1fr);
	}

	.atd-def__meta[b-0yro885quk] {
		grid-column: 1;
		grid-row: auto;
		margin-top: 12px;
		padding: 10px 0 0;
		border-left: none;
		border-top: 1px solid var(--mud-palette-divider);
	}
}

/* ---- Chip rows (census years, size classes, land use groups) ------------- */
.atd-chips[b-0yro885quk] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.atd-chips[b-0yro885quk]  .mud-chip {
	margin: 0;
}

/* ---- Region of interest memberships -------------------------------------- */
/* Short enough to read in place — the regions are few, even where a county list is long. */
.atd-rois[b-0yro885quk] {
	display: grid;
	gap: 10px;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--mud-palette-divider);
	border-radius: var(--mud-default-borderradius);
	background-color: var(--lt-surface);
}

.atd-roi[b-0yro885quk] {
	display: grid;
	gap: 1px;
}

.atd-roi__name[b-0yro885quk] {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mud-palette-text-primary);
}

.atd-roi__counties[b-0yro885quk] {
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--mud-palette-text-secondary);
}

/* ---- Source citations ---------------------------------------------------- */
.atd-sources[b-0yro885quk] {
	display: grid;
	gap: 18px;
}

.atd-source[b-0yro885quk] {
	display: grid;
	gap: 3px;
	padding-left: 12px;
	border-left: 3px solid var(--mud-palette-primary);
}

.atd-source__head[b-0yro885quk] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.atd-source__agency[b-0yro885quk] {
	font-family: var(--lt-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--mud-palette-text-primary);
}

/* Suggested citation — set apart so it reads as a block to copy verbatim rather than as prose. */
.atd-citation[b-0yro885quk] {
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--mud-palette-primary);
	background-color: var(--mud-palette-background-gray);
	border-radius: 0 4px 4px 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--mud-palette-text-primary);
}

/* The sticky panel has nothing to stick to once the columns stack. */
@media (max-width: 1279px) {
	.atd-sticky[b-0yro885quk] {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}
/* /Components/Pages/Compare.razor.rz.scp.css */
/* ============================================================================
   Compare page — Matrix layout styles
   ============================================================================ */

/* ---- Matrix table --------------------------------------------------------- */
.cmp-mx-scroll[b-j7pxj9bk8r] {
	overflow-x: auto;
}

.cmp-mx[b-j7pxj9bk8r] {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	table-layout: auto;
}

/* Corner header */
.cmp-mx-corner[b-j7pxj9bk8r] {
	width: 160px;
	padding: 12px 16px;
	text-align: left;
	vertical-align: bottom;
	border-bottom: 2px solid var(--mud-palette-table-lines);
	white-space: nowrap;
}

.cmp-mx-cornersub[b-j7pxj9bk8r] {
	display: block;
	font-size: 0.7rem;
	color: var(--mud-palette-text-disabled);
	margin-top: 2px;
}

/* Area column header */
.cmp-mx-areahead[b-j7pxj9bk8r] {
	padding: 10px 28px 10px 16px;
	border-bottom: 3px solid var(--accent, var(--mud-palette-divider));
	text-align: left;
	min-width: 150px;
	position: relative;
	vertical-align: bottom;
}

.cmp-mx-areaname[b-j7pxj9bk8r] {
	--lt-stat-size: 1.2rem;
	display: block;
}

.cmp-mx-areatype[b-j7pxj9bk8r] {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.72rem;
	text-transform: uppercase;
	margin-top: 2px;
}

/* "View full trends" deep-link under the area type label */
[b-j7pxj9bk8r] .cmp-mx-trendslink {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 4px;
	color: var(--mud-palette-text-secondary);
}

[b-j7pxj9bk8r] .cmp-mx-trendslink:hover {
	color: var(--mud-palette-primary);
}

[b-j7pxj9bk8r] .cmp-mx-trendslink .mud-icon-root {
	font-size: 0.9rem;
}

/* Position remove button top-right of the header cell */
[b-j7pxj9bk8r] .cmp-mx-x {
	position: absolute !important;
	top: 4px;
	right: 2px;
	opacity: 0;
	transition: opacity 0.12s;
}

.cmp-mx-areahead:hover[b-j7pxj9bk8r]  .cmp-mx-x {
	opacity: 1;
}

/* ---- Add-area column header (dashed card) --------------------------------- */
/* Anchor wrapper so the MudPopover positions against the dashed card. */
.cmp-mx-add-anchor[b-j7pxj9bk8r] {
	position: relative;
}

/* NOTE: width for the add-area popover lives in a GLOBAL stylesheet, not here.
   MudPopover portals its root element out to the MudPopoverProvider at the page
   root, so it never carries this component's scoped CSS attribute. See
   .cmp-add-popover in the global app stylesheet. */

.cmp-mx-addhead[b-j7pxj9bk8r] {
	padding: 8px;
	border-bottom: 2px solid var(--mud-palette-table-lines);
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	min-width: 180px;
}

.cmp-mx-add-card[b-j7pxj9bk8r] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 20px 16px;
	border: 1.5px dashed var(--mud-palette-gray-dark);
	border-radius: 10px;
	transition:
		border-color 0.12s,
		background 0.12s;
}

.cmp-mx-add-card:hover[b-j7pxj9bk8r],
.cmp-mx-add-card.active[b-j7pxj9bk8r] {
	border-color: var(--mud-palette-primary);
	background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.cmp-mx-add-plus[b-j7pxj9bk8r] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mud-palette-gray-lighter);
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--mud-palette-text-secondary);
	transition:
		background 0.12s,
		color 0.12s;
	line-height: 1;
}

.cmp-mx-add-card:hover .cmp-mx-add-plus[b-j7pxj9bk8r],
.cmp-mx-add-card.active .cmp-mx-add-plus[b-j7pxj9bk8r] {
	background: var(--mud-palette-primary);
	color: var(--mud-palette-primary-text);
}

.cmp-mx-add-title[b-j7pxj9bk8r] {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--mud-palette-text-primary);
	text-align: center;
	line-height: 1.3;
}

.cmp-mx-add-sub[b-j7pxj9bk8r] {
	font-size: 0.72rem;
	color: var(--mud-palette-text-secondary);
	text-align: center;
}

/* ---- Metric rows ---------------------------------------------------------- */
.cmp-mx-row[b-j7pxj9bk8r] {
	cursor: pointer;
	transition: background 0.1s;
}

.cmp-mx-row:hover td[b-j7pxj9bk8r] {
	background: var(--mud-palette-gray-lighter);
}

.cmp-mx-row.on td[b-j7pxj9bk8r] {
	background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.cmp-mx-row td[b-j7pxj9bk8r] {
	border-bottom: 1px solid var(--mud-palette-table-lines);
	transition: background 0.1s;
}

/* Row header (first column) */
.cmp-mx-rowhead[b-j7pxj9bk8r] {
	padding: 10px 16px;
	white-space: nowrap;
	vertical-align: middle;
}

.cmp-mx-rowlab[b-j7pxj9bk8r] {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.cmp-mx-rowlab small[b-j7pxj9bk8r] {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--mud-palette-text-secondary);
}

/* ---- Metric cells --------------------------------------------------------- */
.cmp-mx-cell[b-j7pxj9bk8r] {
	padding: 10px 16px;
	vertical-align: middle;
	min-width: 140px;
}

/* Hatched pattern for the empty "add area" column in data rows */
.cmp-mx-cell--empty[b-j7pxj9bk8r] {
	min-width: 0;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent) 6px,
		color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent) 12px
	) !important;
}

/* Typography comes from the global .lt-stat-value / .lt-delta rules. */
.cmp-mx-val[b-j7pxj9bk8r] {
	white-space: nowrap;
}

[b-j7pxj9bk8r] .cmp-delta {
	margin-top: 6px;
}

/* ---- Cell body (value+delta left, sparkline right) ----------------------- */
.cmp-mx-cell-body[b-j7pxj9bk8r] {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}

.cmp-mx-cell-text[b-j7pxj9bk8r] {
	flex: 1;
	min-width: 0;
}

.cmp-mx-spark-wrap[b-j7pxj9bk8r] {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
}

/* ---- Sparkline ------------------------------------------------------------ */
.cmp-spark[b-j7pxj9bk8r] {
	display: block;
}

/* ---- Card header actions (metric switch + view toggle) -------------------- */

.cmp-card-actions[b-j7pxj9bk8r] {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---- Area legend (overlay chart) ----------------------------------------- */

.cmp-legend[b-j7pxj9bk8r] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	justify-content: center;
	padding: 10px 6px 2px;
}

.cmp-legend-item[b-j7pxj9bk8r] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mud-palette-text-primary);
}

.cmp-legend-line[b-j7pxj9bk8r] {
	width: 16px;
	height: 3px;
	border-radius: 2px;
	flex: none;
	display: inline-block;
}

/* ---- Composition small multiples (faceted per-area charts) ---------------- */
.cmp-facets[b-j7pxj9bk8r] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	padding: 16px;
}

.cmp-facet[b-j7pxj9bk8r] {
	min-width: 0;
}

.cmp-facet-head[b-j7pxj9bk8r] {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mud-palette-text-primary);
	border-left: 3px solid var(--accent, var(--mud-palette-divider));
	padding-left: 8px;
	margin-bottom: 8px;
	line-height: 1.3;
}

/* The comparison data table (table view) uses the global .lt-table skin. */
/* /Components/Pages/Dev/ShowcaseSection.razor.rz.scp.css */
.showcase-preview[b-elzd0y5bgl] {
	padding: 12px;
	background: var(--mud-palette-background, #fafafa);
	border-radius: 4px;
	min-height: 60px;
}

.showcase-code pre[b-elzd0y5bgl] {
	background: #1e1e1e;
	color: #d4d4d4;
	padding: 12px;
	border-radius: 4px;
	overflow-x: auto;
	font-size: 12px;
	line-height: 1.4;
	margin: 0;
}

.showcase-code code[b-elzd0y5bgl] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* /Components/Shared/Buttons/PillTabs.razor.rz.scp.css */
/* Segmented pill selector — pale sage track with a floating white "card" for the active tab. */
.pill-tabs[b-cbsfvflo7i] {
	display: inline-flex;
	border-radius: 12px;
	border: 1px solid var(--mud-palette-lines-default);
	background: color-mix(
		in srgb,
		var(--mud-palette-primary) 8%,
		var(--mud-palette-surface, #fff)
	);
	padding: 4px;
}

/* Strip MudToggleGroup's own outline/background so the track shows through. */
.pill-tabs[b-cbsfvflo7i]  .mud-toggle-group {
	border: none !important;
	background: transparent !important;
	border-radius: 0;
	gap: 2px;
}

.pill-tabs[b-cbsfvflo7i]  .mud-toggle-item {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: none;
	padding: 6px 16px;
	border-radius: 8px !important;
	border: none !important;
	color: var(--mud-palette-text-secondary);
	white-space: nowrap;
}

/* Active tab lifts off the track as a white card. */
.pill-tabs[b-cbsfvflo7i]  .mud-toggle-item.mud-toggle-item-selected {
	background-color: var(--mud-palette-surface, #fff) !important;
	color: var(--mud-palette-text-primary) !important;
	box-shadow: var(--mud-elevation-1);
}

.pill-tabs[b-cbsfvflo7i]  .mud-toggle-item:not(.mud-toggle-item-selected):hover {
	background-color: color-mix(
		in srgb,
		var(--mud-palette-primary) 12%,
		transparent
	);
	color: var(--mud-palette-text-primary);
}
/* /Components/Shared/Buttons/ViewToggle.razor.rz.scp.css */
/* Icon-only view switcher — no track; the active icon gets a soft sage chip. */
.view-toggle[b-6ezqh8rsa8] {
	display: inline-flex;
}

.view-toggle[b-6ezqh8rsa8]  .mud-toggle-group {
	border: none !important;
	background: transparent !important;
	gap: 4px;
}

.view-toggle[b-6ezqh8rsa8]  .mud-toggle-item {
	border: none !important;
	border-radius: 8px !important;
	padding: 6px !important;
	min-width: 0;
	color: var(--mud-palette-text-secondary);
	background-color: transparent;
	transition: background-color .15s ease, color .15s ease;
}

.view-toggle[b-6ezqh8rsa8]  .mud-toggle-item.mud-toggle-item-selected {
	background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent) !important;
	color: var(--mud-palette-primary) !important;
}

.view-toggle[b-6ezqh8rsa8]  .mud-toggle-item:not(.mud-toggle-item-selected):hover {
	background-color: var(--mud-palette-gray-lighter);
	color: var(--mud-palette-text-primary);
}
/* /Components/Shared/Cards/Card.razor.rz.scp.css */
.card-eyebrow[b-dj5t3g2uk7] {
	letter-spacing: 0.08em;
	margin: 0 0 5px;
	padding: 0;
}

/* Accent variant — eyebrow text tinted with the card's --card-accent color. */
.card-eyebrow--accent[b-dj5t3g2uk7] {
	color: var(--card-accent, var(--mud-palette-primary));
	font-weight: 700;
}

/* Header layout is a container-query context so Actions placement responds to the
   card's own width, not the viewport. */
.card-header-ctx[b-dj5t3g2uk7] {
	container: card-header / inline-size;
}

.card-header-grid[b-dj5t3g2uk7] {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr;
	grid-template-areas:
		"eyebrow"
		"actions"
		"text";
}

.card-h-eyebrow[b-dj5t3g2uk7] { grid-area: eyebrow; }
.card-h-text[b-dj5t3g2uk7]    { grid-area: text; }

/* Title and its definitions button on one baseline. The button is optical padding, not content,
   so it gets negative margin to keep the title's own spacing intact. */
.card-h-title[b-dj5t3g2uk7] {
	display: flex;
	align-items: center;
	gap: 2px;
}

.card-h-title[b-dj5t3g2uk7]  .mud-icon-button {
	margin: -4px 0 -4px -2px;
}

/* Narrow default: Actions sit as a full-width row between eyebrow and title. */
.card-h-actions[b-dj5t3g2uk7] {
	grid-area: actions;
	margin: 4px 0 10px;
}

/* Eyebrow/title stay top-left, Actions move to the top-right corner — either when the card
   is wide enough, or when the consumer marks the actions compact (CompactActions). */
@container card-header (min-width: 480px) {
	.card-header-grid[b-dj5t3g2uk7] {
		grid-template-columns: 1fr auto;
		column-gap: 16px;
		align-items: start;
		grid-template-areas:
			"eyebrow actions"
			"text    actions";
	}

	.card-h-actions[b-dj5t3g2uk7] {
		justify-self: end;
		align-self: start;
		margin: 0;
	}
}

.card-header-grid--compact[b-dj5t3g2uk7] {
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-items: start;
	grid-template-areas:
		"eyebrow actions"
		"text    actions";
}

.card-header-grid--compact .card-h-actions[b-dj5t3g2uk7] {
	justify-self: end;
	align-self: start;
	margin: 0;
}

.content-no-header[b-dj5t3g2uk7] {
	border-top: none;
}

.card-footer[b-dj5t3g2uk7] {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--mud-palette-lines-default);
	font-size: 0.875rem;
	color: var(--mud-palette-text-secondary);
}

/* Pulls the footer flush to the card edges — the child content owns its own borders/padding.
   When DataTile children are present they form a grid with internal dividers. */
.card-footer--flush[b-dj5t3g2uk7] {
	margin: 0 -16px -16px;
	border-top: none;
	font-size: inherit;
	color: inherit;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.card-footer[b-dj5t3g2uk7]  .dt-tile {
	border-right: 1px solid var(--mud-palette-lines-default);
	border-top: 1px solid var(--mud-palette-lines-default);
}

.card-footer[b-dj5t3g2uk7]  .dt-tile:last-child {
	border-right: none;
}

/* Equal columns stop working once each one is narrower than the number it holds — below md the
   tiles wrap into rows instead. Matters most where a 500px panel goes full-width on a phone. */
@media (max-width: 959.98px) {
	.card-footer--flush[b-dj5t3g2uk7] {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/* On xs even two columns squeeze the labels and leave an odd tile stranded on its own row, so
   each tile takes a full row. Only the top borders separate them then. */
@media (max-width: 599.98px) {
	.card-footer--flush[b-dj5t3g2uk7] {
		grid-template-columns: 1fr;
	}

	.card-footer[b-dj5t3g2uk7]  .dt-tile {
		border-right: none;
	}
}
/* /Components/Shared/Cards/CardTabs.razor.rz.scp.css */
/* Pull edge-to-edge against MudCardContent's 16px padding so the tab border
   spans the full card width. */
.ct-root[b-8cmq6a7d3i] {
	margin: -16px -16px 0;
}

/* MudStack handles display:flex; keep border, padding, and wrap. */
[b-8cmq6a7d3i] .ct-tabs {
	padding: 8px 12px 0;
	border-bottom: 1px solid var(--mud-palette-lines-default);
	flex-wrap: wrap;
}

/* Override MudButton (and the global .mud-button rule) for tab appearance. */
[b-8cmq6a7d3i] .ct-tab {
	position: relative;
	padding: 9px 12px 11px !important;
	font-size: 0.78125rem !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	color: var(--mud-palette-text-secondary) !important;
	white-space: nowrap;
	border-radius: 6px 6px 0 0 !important;
	border-bottom: solid 2px transparent;
	transition:
		color 120ms,
		background 120ms;
	min-width: 0 !important;
	height: auto !important;
}

[b-8cmq6a7d3i] .ct-tab:hover {
	color: var(--mud-palette-text-primary) !important;
}

[b-8cmq6a7d3i] .ct-tab.on {
	color: var(--lt-forest-green) !important;
	border-bottom: solid 2px var(--mud-palette-success);
}

[b-8cmq6a7d3i] .ct-tab.on::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: -1px;
	height: 2.5px;
	background: var(--ct-accent, var(--mud-palette-primary));
	border-radius: 2px;
}

/* Restore the card content padding inside the body area. */
[b-8cmq6a7d3i] .ct-body {
	padding: 16px;
}
/* /Components/Shared/Cards/DataTile.razor.rz.scp.css */
.dt-tile[b-nn76snn9tj] {
	padding: 11px 14px 12px;
}

/* Typography comes from the global .lt-stat-value / .lt-delta rules;
   only the tile's compact sizing lives here. */
[b-nn76snn9tj] .dt-value {
	margin: 6px 0 0;
}

[b-nn76snn9tj] .dt-delta {
	font-size: 0.71875rem;
	font-weight: 700;
	margin-top: 6px;
}

[b-nn76snn9tj] .dt-delta .mud-icon-root {
	font-size: 0.75rem;
}

/* Muted and unbolded so the percentage keeps the emphasis and the direction color stays
   attached to the number it belongs to, not to the timeframe. */
[b-nn76snn9tj] .dt-delta-suffix {
	font-weight: 400;
	color: var(--mud-palette-text-secondary);
	margin-left: 3px;
}
/* /Components/Shared/Cards/MetricCard.razor.rz.scp.css */
.kpi[b-18pos44qxj] {
	border-top: 4px solid var(--kpi-accent, var(--mud-palette-primary));
	border-right: 1px solid var(--mud-palette-lines-default);
}

.kpi--clickable[b-18pos44qxj] {
	cursor: pointer;
}

/* The card carries role="button" and tabindex when it acts as a tab, so it has to show focus.
   Inset rather than outset: the cards butt against each other with no gap, and an outset ring
   would be clipped by the neighbour. */
.kpi--clickable:focus-visible[b-18pos44qxj] {
	outline: 2px solid var(--kpi-accent, var(--mud-palette-primary));
	outline-offset: -3px;
}

.kpi--inactive[b-18pos44qxj]  .mud-paper {
	background-color: var(--mud-palette-gray-lighter);
}

/* Hover affordances so unselected cards read as clickable tabs, not disabled cards:
   the card lightens back to a surface and the "View" badge fills with the
   card's accent, previewing the selection. */
.kpi--inactive.kpi--clickable:hover[b-18pos44qxj]  .mud-paper {
	background-color: var(--mud-palette-surface);
}

.kpi--clickable:hover .kpi-badge--inactive[b-18pos44qxj] {
	border-color: var(--kpi-accent, var(--mud-palette-primary));
	color: var(--kpi-accent, var(--mud-palette-primary));
	background-color: color-mix(in srgb, var(--kpi-accent, var(--mud-palette-primary)) 10%, transparent);
}

.kpi--inactive[b-18pos44qxj]  .mud-paper,
.kpi-badge--inactive[b-18pos44qxj] {
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.kpi-header[b-18pos44qxj] {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.kpi-label[b-18pos44qxj] {
	letter-spacing: 0.07em;
	margin: 0;
	padding: 0;
}

/* Side by side, the nowrap badge leaves the label ~120px and it wraps to three lines. Below md
   they stack instead, so the label gets the full card width and stays on one line. */
@media (max-width: 959.98px) {
	.kpi-header[b-18pos44qxj] {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

[b-18pos44qxj] .mud-paper {
	border-radius: 0 !important;
}

[b-18pos44qxj] .kpi-value {
	--lt-stat-size: 1.5625rem;
}

[b-18pos44qxj] .kpi-value-suffix {
	font-family: var(--mud-typography-default-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--mud-palette-text-secondary);
	letter-spacing: 0;
	margin-left: 3px;
}

[b-18pos44qxj] .kpi-caption {
	display: block;
	margin-top: 9px;
	color: var(--mud-palette-text-secondary);
}

/* Color and typography come from the global .lt-delta rules. */
[b-18pos44qxj] .kpi-delta {
	margin-top: 9px;
}

[b-18pos44qxj] .kpi-delta-suffix {
	font-weight: 400;
	font-size: inherit;
	margin-left: 2px;
}

.kpi-badge[b-18pos44qxj] {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.5;
	flex-shrink: 0;
}

.kpi-badge--active[b-18pos44qxj] {
	background-color: color-mix(in srgb, var(--lt-positive) 12%, transparent);
	color: var(--lt-positive);
}

.kpi-badge-dot[b-18pos44qxj] {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
	flex-shrink: 0;
}

.kpi-badge--inactive[b-18pos44qxj] {
	color: var(--mud-palette-text-secondary);
	border: 1.5px solid var(--mud-palette-lines-default);
}

.kpi-badge-chevron[b-18pos44qxj] {
	font-size: 1.1em;
	line-height: 1;
}

.kpi-body[b-18pos44qxj] {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.kpi-body-text[b-18pos44qxj] {
	flex: 1;
	min-width: 0;
}

.kpi-spark-wrap[b-18pos44qxj] {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	padding-bottom: 2px;
}

[b-18pos44qxj] .kpi-spark {
	display: block;
}
/* /Components/Shared/Definitions/DefinitionPanel.razor.rz.scp.css */
/* Rows of chips, the term head, and link colors/sizes come from Stack, Chip and MudLink;
   what's left here is the drawer's own shell and the two treatments MudBlazor has no token for.
   Anything rendered by a child component (MudText, MudLink) needs ::deep — the scope attribute
   lands only on elements written in the .razor. */

.dp[b-ejg1r9pacv] {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.dp__head[b-ejg1r9pacv] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 8px 12px 20px;
	border-bottom: 1px solid var(--mud-palette-divider);
}

/* The definitions are the only thing that scrolls; head and foot stay put. */
.dp__body[b-ejg1r9pacv] {
	flex: 1;
	overflow-y: auto;
	padding: 18px 20px;
	display: grid;
	gap: 26px;
	align-content: start;
}

.dp__term[b-ejg1r9pacv] {
	display: grid;
	gap: 6px;
}

/* The display face card titles get from .mud-card-header h6 — the theme's h6 is body font. */
[b-ejg1r9pacv] .dp__term-name {
	font-family: var(--lt-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Why the grain matters, set apart from the definition proper. */
[b-ejg1r9pacv] .dp__grain {
	padding-left: 10px;
	border-left: 2px solid var(--mud-palette-primary);
}

.dp__foot[b-ejg1r9pacv] {
	padding: 12px 20px;
	border-top: 1px solid var(--mud-palette-divider);
	background-color: var(--lt-surface);
}

[b-ejg1r9pacv] .dp__link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: 600;
}

[b-ejg1r9pacv] .dp__link .mud-icon-root {
	font-size: 0.875rem;
}
/* /Components/Shared/ExploreActions.razor.rz.scp.css */
.ea[b-pxdattlcub] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Stretch rather than right-align: stacked buttons of unequal width read as ragged next to the
   banner's divider, so both take the column's width. */
.ea--stacked[b-pxdattlcub] {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 10px;
}

[b-pxdattlcub] .ea-primary {
	background-color: var(--ea-accent);
	color: var(--ea-ink);
}

[b-pxdattlcub] .ea-primary:hover {
	background-color: var(--ea-accent);
	filter: brightness(1.08);
}

[b-pxdattlcub] .ea-secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}

[b-pxdattlcub] .ea-secondary:hover {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}
/* /Components/Shared/ExploreCta.razor.rz.scp.css */
/* Padding matches HomeHero's banner so the page opens and closes on the same rhythm. */
[b-ux2qydsbvj] .cta-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 28px 36px;
	color: #fff !important;
}

.cta-text[b-ux2qydsbvj] {
	flex: 1 1 auto;
	min-width: 0;
}

[b-ux2qydsbvj] .cta-title {
	font-weight: 700;
	line-height: 1.15;
	color: inherit;
}

[b-ux2qydsbvj] .cta-subtitle {
	color: rgba(255, 255, 255, 0.75);
	margin-top: 8px;
	max-width: 60ch;
}

/* ::deep because ExploreActions renders this element, so it carries that component's scope id,
   not this one's. Layout and button colours live there; only the banner's sizing is set here. */
[b-ux2qydsbvj] .cta-actions {
	flex: 0 0 auto;
}

@media (max-width: 960px) {
	[b-ux2qydsbvj] .cta-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}
/* /Components/Shared/Forms/AreaSelector.razor.rz.scp.css */
/* lock bar */
.as-lock[b-5tta9cpdsm] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	padding: 8px 13px;
	border-radius: 7px;
	background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
	border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-lines-default));
	font-size: 12.5px;
	color: var(--mud-palette-text-secondary);
}

.as-lock b[b-5tta9cpdsm] {
	color: var(--lt-forest-green);
	font-weight: 600;
}

.as-lock-clear[b-5tta9cpdsm] {
	flex: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mud-palette-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.as-lock-clear:hover[b-5tta9cpdsm] {
	color: var(--lt-olive-green);
}

/* footer: selection count + submit */
.as-footer[b-5tta9cpdsm] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* On xs the count and the button can't share a row — the button's label ("View 3 counties →")
   wraps mid-phrase. Stack them and let the button fill the width as the primary action. */
@media (max-width: 599.98px) {
	.as-footer[b-5tta9cpdsm] {
		flex-direction: column;
		align-items: stretch;
	}
}

/* click-away overlay */
.as-overlay[b-5tta9cpdsm] {
	position: fixed;
	inset: 0;
	z-index: calc(var(--lt-z-menu) - 1);
}

/* results dropdown */
.as-menu[b-5tta9cpdsm] {
	list-style: none;
	margin: 0 0 8px;
	padding: 5px;
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 8px;
	background: var(--mud-palette-surface);
	box-shadow: var(--mud-elevation-4);
	max-height: 320px;
	overflow-y: auto;
	position: relative;
	z-index: var(--lt-z-menu);
}

.as-menu-grouphead[b-5tta9cpdsm] {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mud-palette-text-disabled);
	padding: 8px 10px 4px;
}

.as-menu-item[b-5tta9cpdsm] {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	color: var(--mud-palette-text-primary);
	transition: background 0.12s;
}

.as-menu-item:hover[b-5tta9cpdsm] {
	background: var(--lt-surface);
}

/* Keyboard highlight. Focus never leaves the search box, so this stands in for a focus ring and has
   to read as stronger than :hover — both can be on different rows at the same time. */
.as-menu-item--active[b-5tta9cpdsm],
.as-menu-item--active:hover[b-5tta9cpdsm] {
	background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.as-menu-item-icon[b-5tta9cpdsm] {
	color: var(--mud-palette-text-secondary) !important;
	font-size: 16px !important;
	flex: none;
}

.as-menu-empty[b-5tta9cpdsm] {
	font-size: 13.5px;
	color: var(--mud-palette-text-secondary);
	font-style: italic;
	margin: 6px 0 10px;
	padding: 0;
}

/* browse / popular pill buttons */
.as-shortcut-label[b-5tta9cpdsm] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mud-palette-text-disabled);
}

.as-quick[b-5tta9cpdsm] {
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--mud-palette-lines-default);
	color: var(--mud-palette-text-secondary);
	background: var(--mud-palette-background);
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.as-quick:hover[b-5tta9cpdsm] {
	border-color: var(--mud-palette-primary);
	color: var(--mud-palette-text-primary);
}

.as-quick--on[b-5tta9cpdsm] {
	background: var(--lt-forest-green);
	color: #fff;
	border-color: var(--lt-forest-green);
}

.as-quick--on:hover[b-5tta9cpdsm] {
	background: var(--lt-olive-green);
	border-color: var(--lt-olive-green);
	color: #fff;
}

/* The pills and the clear link strip their native chrome, which makes the UA focus ring hard to see
   against a filled pill — give keyboard users an unambiguous one. */
.as-quick:focus-visible[b-5tta9cpdsm],
.as-lock-clear:focus-visible[b-5tta9cpdsm] {
	outline: 2px solid var(--mud-palette-primary);
	outline-offset: 2px;
}
/* /Components/Shared/Forms/Fields/SearchSelect.razor.rz.scp.css */
.search-select[b-p6nxnz8jd7] {
    position: relative;
    display: block;
}

.search-select__trigger[b-p6nxnz8jd7] {
    cursor: pointer;
    user-select: none;
}

.search-select__overlay[b-p6nxnz8jd7] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--lt-z-select) - 1);
}

.search-select__panel[b-p6nxnz8jd7] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: var(--lt-z-select);
    min-width: 100%;
    width: max-content;
    max-width: 420px;
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    overflow: hidden;
}

.search-select__search[b-p6nxnz8jd7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    margin: 8px;
    border-radius: 6px;
}

.search-select__search-icon[b-p6nxnz8jd7] {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 1.1rem !important;
    flex-shrink: 0;
}

.search-select__search-input[b-p6nxnz8jd7] {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    min-width: 0;
}

    .search-select__search-input[b-p6nxnz8jd7]::placeholder {
        color: var(--mud-palette-text-secondary);
    }

.search-select__list[b-p6nxnz8jd7] {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0 6px;
}

.search-select__item[b-p6nxnz8jd7] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    gap: 4px;
    transition: background-color 100ms;
}

    .search-select__item:hover[b-p6nxnz8jd7] {
        background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    }

.search-select__item--selected[b-p6nxnz8jd7] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

    .search-select__item--selected:hover[b-p6nxnz8jd7] {
        background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    }

.search-select__item-check[b-p6nxnz8jd7] {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-select__item-text[b-p6nxnz8jd7] {
    flex: 1;
    font-size: 0.875rem;
    min-width: 0;
}

.search-select__item-secondary[b-p6nxnz8jd7] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.search-select__no-results[b-p6nxnz8jd7] {
    padding: 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}
/* /Components/Shared/FragmentationProcess.razor.rz.scp.css */
.frag-ribbon[b-7gaqrea0ql] {
	display: flex;
	align-items: stretch;
}

/* Each segment is a rightward chevron; the notch on the left tucks under the previous segment's
   point via the negative margin, so the row reads as one connected arrow ribbon. */
.frag-seg[b-7gaqrea0ql] {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	color: #fff;
	padding: 16px 14px 16px 34px;
	margin-left: -16px;
	display: flex;
	align-items: center;
	gap: 12px;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}

.frag-seg:first-child[b-7gaqrea0ql] {
	margin-left: 0;
	padding-left: 22px;
	border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

.frag-seg-ic[b-7gaqrea0ql] {
	flex: none;
	opacity: 0.92;
}

.frag-seg-txt[b-7gaqrea0ql] {
	min-width: 0;
}

/* MudText sets its own color; force it to inherit the segment's ink (white, or dark on tan). */
.frag-seg[b-7gaqrea0ql]  .mud-typography {
	color: inherit;
}

.frag-seg-step[b-7gaqrea0ql] {
	display: block;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.78;
}

.frag-seg-label[b-7gaqrea0ql] {
	display: block;
	font-weight: 600;
	line-height: 1.25;
	margin-top: 3px;
}

.frag-seg-subtitle[b-7gaqrea0ql] {
	display: block;
	opacity: 0.78;
	margin-top: 2px;
}

/* Narrow screens: stack the segments as plain rounded bars and drop the arc. */
@media (max-width: 760px) {
	.frag-ribbon[b-7gaqrea0ql] {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.frag-seg[b-7gaqrea0ql],
	.frag-seg:first-child[b-7gaqrea0ql] {
		clip-path: none;
		margin-left: 0;
		padding-left: 16px;
		border-radius: var(--mud-default-borderradius);
	}
}
/* /Components/Shared/HomeHero.razor.rz.scp.css */
[b-82qqjnaxij] .hero-banner {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 28px 36px;
	color: #fff !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

[b-82qqjnaxij] .hero-eyebrow {
	color: #fff;
	letter-spacing: 0.12em;
	font-weight: 700;
}

[b-82qqjnaxij] .hero-title {
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
	margin-top: 6px;
}

.hero-headline[b-82qqjnaxij] {
	flex: 1 1 auto;
	min-width: 0;
}

.hero-cta[b-82qqjnaxij] {
	flex: 0 0 auto;
	padding-left: 40px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	min-width: 210px;
}

@media (max-width: 960px) {
	[b-82qqjnaxij] .hero-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* Once the banner stacks, the buttons sit under the headline rather than beside it, so the
	   divider goes and they take their natural width instead of the slot's. */
	.hero-cta[b-82qqjnaxij] {
		padding-left: 0;
		border-left: none;
		min-width: 0;
	}

	[b-82qqjnaxij] .hero-cta .ea--stacked {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
}
/* /Components/Shared/Maps/ArcGisMap.razor.rz.scp.css */
.arcgis-map-container[b-zig05r6pgy] {
	position: relative;
	width: 100%;
	/* 64px app bar + ~56px sticky bar + ~4px for borders/shadows */
	height: calc(100dvh - 124px);
}

arcgis-map[b-zig05r6pgy] {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Floating layer selector ------------------------------------------- */
/* MudPaper toolbar (the layer / dimension / year selects) floated over the top-left of
   the map. Only the positioning lives here — surface, elevation, spacing and dividers
   all come from MudPaper / Stack / MudDivider.

   --map-toolbar-reserve is how much of the right edge another floating overlay covers,
   set by whoever put it there (see DetailsTemplate's analysis card). Two absolutely
   positioned panels in separate components can't reflow around each other, so the
   toolbar is told what space is taken and wraps into what's left instead — which is
   what Wrap.Wrap on its Stack is already for. Unset means the whole width is ours. */
[b-zig05r6pgy] .map-toolbar {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 10;
	max-width: calc(100% - 32px - var(--map-toolbar-reserve, 0px));
}

/* Let each MudSelect shrink to its content instead of the default field min-width.
   ::deep because the styled element is rendered by MudSelect, not by this component.
   Pairs with RelativeWidth="DropdownWidth.Adaptive" on the selects: the field stays as
   narrow as the selection, while the popover grows to fit the longest option. */
[b-zig05r6pgy] .map-toolbar__select {
	min-width: 0;
}

/* The fixed-breaks note under the dropdowns. Wraps to two lines at most, and is capped narrower
   than the toolbar so it doesn't stretch the floating panel across the map. */
[b-zig05r6pgy] .map-toolbar__caption {
	display: block;
	margin-top: 4px;
	max-width: 46ch;
	color: var(--mud-palette-text-secondary);
}

/* ---- Floating class-break legend --------------------------------------- */
/* Bottom-left, clear of the SDK's attribution strip along the bottom edge. Not marked
   data-map-inset for the same reason the toolbar isn't: it covers a corner rather than a
   full edge, so claiming view padding for it would cost the fit more than it's worth. */
[b-zig05r6pgy] .map-legend {
	position: absolute;
	bottom: 82px;
	left: 16px;
	z-index: 10;
	max-width: calc(100% - 32px);
}

/* One column per class, all of them as wide as the widest label — 1fr tracks in a grid the
   container sizes to its content resolve to the largest column's max-content, so no range
   wraps and no swatch is wider than its neighbor for a reason the reader can't see. The gap
   is what separates one class from the next: the breaks are the point of this legend, and a
   continuous bar hides exactly the thing it's meant to show. */
.map-legend__scale[b-zig05r6pgy] {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	column-gap: 3px;
	min-width: 0;
}

/* Uniform swatches are worth ~35% of the legend's width right up until they cost a label: the
   widest range ("−25 to −10%") is twice the narrowest, so every column pays for the worst one.
   Below sm there isn't room for that, and a truncated number is worse than an uneven bar — each
   column takes only what it needs, with a wider gap so the classes still read as separate. */
@media (max-width: 599.98px) {
	.map-legend__scale[b-zig05r6pgy] {
		grid-auto-columns: auto;
		column-gap: 5px;
	}
}

.map-legend__class[b-zig05r6pgy] {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* No data is not a step on the ramp; a wider gap says so without a divider or a heading. */
.map-legend__class--nodata[b-zig05r6pgy] {
	margin-left: 9px;
}

/* The inset hairline delineates adjacent shades the ramp deliberately keeps close, and is the
   only thing that makes the white no-data swatch visible against the paper. */
.map-legend__swatch[b-zig05r6pgy] {
	height: 10px;
	border-radius: 1px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* Ranges never wrap: a two-line label would push the swatches out of alignment, and on a narrow
   window losing the tail of a number is better than losing the row. */
[b-zig05r6pgy] .map-legend__label {
	margin: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
	color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/Maps/AreaClickCard.razor.rz.scp.css */
/* ---- Area-click popover ---------------------------------------------------- */
/* Positioned directly at the map click's screen coordinates (relative to .dt-canvas, which
   the click's x/y already are — see ArcGisMap.razor.js), like a map callout, instead of
   relying on MudPopover's anchor-based placement. Opens above the click by default and flips
   below near the top of the map (see AreaClickCard.PlaceBelow); --cx carries the click x. */
.dt-click-card-wrap[b-sh2wy1m6kt] {
	position: absolute;
	z-index: 15;
	width: min(280px, calc(100% - 32px));
	/* Center on the click, but clamp so the card's edges never cross the map sides
	   (148px = half the 280px width + an 8px margin). */
	left: clamp(148px, var(--cx), calc(100% - 148px));
	transform: translate(-50%, calc(-100% - 14px));
}

/* Too close to the top to open upward without sliding behind the sticky metric bar above the
   map — open downward from the click instead. */
.dt-click-card-wrap.below[b-sh2wy1m6kt] {
	transform: translate(-50%, 14px);
}

.dt-click-card[b-sh2wy1m6kt]  .mud-card-content {
	padding-top: 4px;
}

/* ---- Metric rows ----------------------------------------------------------- */
.acc-metric[b-sh2wy1m6kt] {
	padding: 8px 0;
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

.acc-metric:first-child[b-sh2wy1m6kt] {
	padding-top: 0;
}

.acc-metric:last-child[b-sh2wy1m6kt] {
	border-bottom: none;
	padding-bottom: 0;
}

.acc-metric-label[b-sh2wy1m6kt] {
	display: block;
	color: var(--mud-palette-text-secondary);
	line-height: 1.6;
}

.acc-metric-row[b-sh2wy1m6kt] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/* Typography comes from the global .lt-stat-value / .lt-delta rules. */
.acc-metric-value[b-sh2wy1m6kt] {
	--lt-stat-size: 1.375rem;
}

[b-sh2wy1m6kt] .acc-delta {
	font-variant-numeric: tabular-nums;
}

[b-sh2wy1m6kt] .acc-delta .mud-icon-root {
	font-size: 0.9375rem;
}

/* Footer: full-width stacked actions (primary "View trends" over outlined "Compare"). */
[b-sh2wy1m6kt] .mud-card-actions {
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
}
/* /Components/Shared/PageTemplates/DetailsTemplate.razor.rz.scp.css */
/* ---- Map canvas ----------------------------------------------------------- */
.dt-canvas[b-6h8hwtoqht] {
	position: relative;
	flex: 1;
	min-height: 0;
}

/* The card's own width plus the gap that keeps the map's toolbar off its edge. ArcGisMap subtracts
   this from the toolbar's max-width (see --map-toolbar-reserve there), so on a window too narrow for
   both the toolbar wraps into the space left of the card instead of disappearing under it. Kept
   beside the width it mirrors — the two numbers only mean anything together. */
.dt-canvas--panel[b-6h8hwtoqht] {
	--map-toolbar-reserve: 516px;
}

/* ---- Floating analysis card (open) — float over the right of the map ------ */
.dt-focus-wrap[b-6h8hwtoqht] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 500px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	z-index: 10;
	display: flex;
}

.dt-focus-wrap[b-6h8hwtoqht]  .dt-focus-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	max-height: 100%;
}

/* Body scrolls; chart/table + footer live inside MudCardContent. */
.dt-focus-wrap[b-6h8hwtoqht]  .mud-card-content {
	overflow-y: auto;
	min-height: 0;
}

/* Clearance so the header text doesn't run under the absolute close button.
   Header layout itself (eyebrow / actions / title) is handled by Card's grid. */
.dt-focus-wrap[b-6h8hwtoqht]  .mud-card-header {
	padding-right: 40px;
}

.dt-focus-actions[b-6h8hwtoqht] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

/* Close button — absolute top-right of the floating card */
[b-6h8hwtoqht] .dt-focus-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	color: var(--mud-palette-text-disabled) !important;
}

[b-6h8hwtoqht] .dt-focus-close:hover {
	color: var(--mud-palette-text-secondary) !important;
}

/* ---- Reopen pill (collapsed) ---------------------------------------------- */
.dt-focus-reopen[b-6h8hwtoqht] {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--mud-palette-text-primary);
	cursor: pointer;
	background: var(--mud-palette-surface);
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 9px;
	box-shadow: var(--mud-elevation-2);
	transition:
		border-color 0.12s,
		box-shadow 0.12s;
}

.dt-focus-reopen:hover[b-6h8hwtoqht] {
	border-color: var(--mud-palette-text-secondary);
	box-shadow: var(--mud-elevation-4);
}

.dt-focus-reopen[b-6h8hwtoqht]  .mud-icon-root {
	font-size: 1rem;
	color: var(--mud-palette-text-secondary);
}

/* ---- Below md: no map, so the card is the page ---------------------------- */
/* DetailsTemplate stops rendering the map here, which leaves nothing for the card to float over.
   It drops into normal flow at full width and lets the document scroll instead of its own body. */
@media (max-width: 959.98px) {
	.dt-focus-wrap[b-6h8hwtoqht] {
		position: static;
		width: 100%;
		max-width: 100%;
		max-height: none;
	}

	.dt-focus-wrap[b-6h8hwtoqht]  .dt-focus-card {
		max-height: none;
	}

	.dt-focus-wrap[b-6h8hwtoqht]  .mud-card-content {
		overflow-y: visible;
	}

	/* No absolute close button to clear anymore. */
	.dt-focus-wrap[b-6h8hwtoqht]  .mud-card-header {
		padding-right: 16px;
	}

	/* Sub-tab pills and the chart/table toggle stop competing for one row. */
	.dt-focus-actions[b-6h8hwtoqht] {
		flex-wrap: wrap;
	}
}