/**
 * Real Estate Data Pro — front-end styles.
 *
 * Everything is scoped under .rep-data-report and driven by CSS custom
 * properties. Each --rep-data-* property below reads from the matching
 * --rep-* token Real Estate Pro Core's Design\Resolver resolves and injects
 * into the shared rep-tokens stylesheet (rep-data depends on rep-tokens,
 * see Plugin::register_assets()) — so a Core Design template/color/
 * Customize change reaches Snapshot and Market Data reports the same way
 * it reaches everything else in the suite, with no Data-Pro-specific
 * wiring needed. The literal hex/px values are var()'s fallback only, used
 * if Core isn't active or hasn't resolved that token for some reason — not
 * the values actually rendered day to day. This intentionally does NOT
 * apply to the fixed-palette visual styles below (gradient/contrast/sleek/
 * minimal/editorial/bold/corporate) — those are deliberately independent
 * skins that override these variables with their own hardcoded colors
 * regardless of brand settings; only 'classic' and 'nwa' (which explicitly
 * keep inheriting from here, see their own comments below) are affected.
 */

.rep-data-report {
	--rep-data-brand: var(--rep-primary-solid, #1f5f8b);
	--rep-data-brand-dark: var(--rep-primary-dark, #17475f);
	--rep-data-brand-light: var(--rep-primary-light, #7fb0cd);
	--rep-data-brand-wash: var(--rep-primary-wash, #eaf2f8);
	--rep-data-on-brand: var(--rep-on-primary, #ffffff);
	--rep-data-accent: var(--rep-accent-solid, #e07a2f);
	--rep-data-on-accent: var(--rep-on-accent, #ffffff);
	--rep-data-text: var(--rep-card-fg, #1d2327);
	--rep-data-muted: #6b7280;
	--rep-data-surface: var(--rep-card-bg, #ffffff);
	/* A flat neutral panel, independent of the brand colour — used for the
	   brand card and anywhere else that should read as a calm background
	   rather than a tint of whatever colour the agent picked. */
	--rep-data-panel-bg: var(--rep-surface-alt, #f4f5f7);
	--rep-data-radius: var(--rep-radius-md, 10px);
	--rep-data-font: var(--rep-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--rep-data-heat-low: var(--rep-primary-wash, #e8f1f8);
	--rep-data-heat-high: var(--rep-primary-solid, #1f5f8b);
	--rep-data-logo-height: 60px;
	--rep-data-border: var(--rep-border, rgba(0, 0, 0, 0.1));
	--rep-data-shadow: var(--rep-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05));

	/* The report's own outer background — deliberately --rep-data-panel-bg
	   (a "recessed canvas" shade distinct from --rep-data-surface, the
	   same one every visual style already defines its own contrasting
	   pair for) rather than --rep-data-surface itself, so KPI tiles/tables/
	   callouts — which *do* sit on --rep-data-surface — read as raised
	   cards against it instead of visually merging into a same-colour,
	   double-bordered, double-shadowed container. */
	--rep-data-page-bg: var(--rep-data-panel-bg);
	/* Template-driven card spacing (Customize → Card spacing / a preset
	   template's own density) — clamp() keeps a floor/ceiling so very
	   small viewports never lose all padding and very large ones never
	   get an absurdly wide gutter, same purpose the old fixed clamp()
	   served, just fed by the resolved token now instead of a constant. */
	--rep-data-content-pad: clamp(16px, 4vw, var(--rep-card-padding, 32px));

	/* The whole control layer runs on two type sizes and one height, so
	   tabs, buttons, selects, inputs and filter pills line up exactly. */
	--rep-data-control-size: 0.8rem;
	--rep-data-meta-size: 0.72rem;
	--rep-data-control-height: 2rem;

	font-family: var(--rep-data-font);
	color: var(--rep-data-text);
	background: var(--rep-data-page-bg);
	border: 1px solid var(--rep-data-border);
	border-radius: var(--rep-data-radius);
	box-shadow: var(--rep-data-shadow);
	padding: var(--rep-data-content-pad);
	container-type: inline-size;
	position: relative;
	line-height: 1.5;
	box-sizing: border-box;
}

.rep-data-report *,
.rep-data-report *::before,
.rep-data-report *::after {
	box-sizing: inherit;
}

/*
 * Alignment (an --align shortcode attribute — see Shortcode\
 * MarketDataShortcode — or the Elementor/WPBakery "Alignment" control).
 * Unset by default: the full report (tables, charts, filters) fills its
 * container exactly as before. Left/center/right opt into a bounded,
 * positioned card instead — same convention .rep-data-snapshot's own
 * align classes and Tools/Forms Pro's --align-* classes use, just a
 * wider default max-width given how much this component typically holds.
 */
.rep-data-report--align-left,
.rep-data-report--align-right,
.rep-data-report--align-center {
	max-width: var(--rep-data-report-max-width, 960px);
}

.rep-data-report--align-left {
	margin-right: auto;
}

.rep-data-report--align-right {
	margin-left: auto;
}

.rep-data-report--align-center {
	margin-left: auto;
	margin-right: auto;
}

.rep-data-report--align-full {
	max-width: none;
}

.rep-data-report.is-loading {
	position: relative;
}

.rep-data-report.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--rep-data-surface) 62%, transparent);
	backdrop-filter: blur(1px);
	z-index: 5;
	pointer-events: none;
}

.rep-data-report.is-loading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--rep-data-brand), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: rep-data-progress 1.1s ease-in-out infinite;
	z-index: 6;
}

@keyframes rep-data-progress {
	0% { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rep-data-report.is-loading::before {
		animation: none;
		background-position: 50% 0;
	}
}

/* -------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------- */

.rep-data-header {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--rep-data-brand);
}

.rep-data-header__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.65rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--rep-data-text);
}

.rep-data-header__meta {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: var(--rep-data-muted);
}

/* -------------------------------------------------------------------
 * Category tabs — Residential / Commercial / Land. The one hard
 * partition in the whole report: never a filter pill among others, so it
 * gets its own row, its own weight, and sits above every other control.
 * ---------------------------------------------------------------- */

.rep-data-category-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.rep-data-category-tabs__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--rep-data-border);
	border-bottom: 3px solid transparent;
	background: var(--rep-data-surface);
	color: var(--rep-data-muted);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	padding: 11px 18px;
	border-radius: calc(var(--rep-data-radius) - 2px) calc(var(--rep-data-radius) - 2px) 0 0;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rep-data-category-tabs__tab:hover:not(:disabled) {
	color: var(--rep-data-text);
	background: var(--rep-data-brand-wash);
}

.rep-data-category-tabs__tab:focus-visible {
	outline: 2px solid var(--rep-data-brand);
	outline-offset: 1px;
}

.rep-data-category-tabs__tab:disabled {
	cursor: default;
}

.rep-data-category-tabs__tab.is-active {
	color: var(--rep-data-brand-dark);
	border-color: var(--rep-data-border);
	border-bottom-color: var(--rep-data-brand);
	background: var(--rep-data-surface);
}

.rep-data-category-tabs__count {
	font-size: var(--rep-data-meta-size);
	font-weight: 600;
	color: var(--rep-data-muted);
	background: var(--rep-data-brand-wash);
	border-radius: 999px;
	padding: 2px 8px;
	line-height: 1.4;
}

.rep-data-category-tabs__tab.is-active .rep-data-category-tabs__count {
	color: var(--rep-data-brand-dark);
}

/* -------------------------------------------------------------------
 * Linked snapshots
 *
 * Every published Current Market Snapshot belonging to this report,
 * rendered ahead of the historical sections. Centred and using the full
 * available width by default — the site owner should not have to
 * manually widen it — and visually distinct from the report's own cards,
 * so it reads as a separate, self-contained figure rather than one more
 * section of the historical data below it. Multiple snapshots (e.g.
 * Residential, Commercial and Land) sit side by side once there is room.
 * ------------------------------------------------------------------- */

.rep-data-report__snapshots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0 0 2rem;
}

.rep-data-report__snapshots .rep-data-snapshot {
	max-width: none;
	flex: 1 1 480px;
	margin: 0;
}

.rep-data-report__snapshots:has(.rep-data-snapshot:only-child) .rep-data-snapshot {
	flex-basis: 100%;
}

/* -------------------------------------------------------------------
 * Buttons and controls
 * ---------------------------------------------------------------- */

.rep-data-btn {
	appearance: none;
	border: 1px solid var(--rep-data-border);
	background: var(--rep-data-surface);
	color: var(--rep-data-text);
	border-radius: calc(var(--rep-data-radius) - 4px);
	height: var(--rep-data-control-height);
	padding: 0 13px;
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rep-data-btn:hover,
.rep-data-btn:focus-visible {
	background: var(--rep-data-brand-wash);
	border-color: var(--rep-data-brand-light);
	color: var(--rep-data-brand-dark);
}

.rep-data-btn--primary {
	background: var(--rep-data-btn-bg, var(--rep-data-brand));
	border-color: var(--rep-data-brand);
	color: var(--rep-data-on-brand);
}

.rep-data-controls {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.rep-data-controls__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.rep-data-controls__right {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-left: auto;
}

.rep-data-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	/* Neutral track, not a tint of the chosen brand color — see
	   --rep-data-panel-bg's own definition above ("independent of the
	   brand colour"). The selected tab below signals its state with a
	   colored ring + text, not a filled background, so this track never
	   reads as "colored by your custom color" either. */
	background: var(--rep-data-panel-bg);
	padding: 3px;
	border-radius: var(--rep-data-radius);
	align-items: center;
}

.rep-data-tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--rep-data-brand-dark);
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: 600;
	height: var(--rep-data-control-height);
	padding: 0 14px;
	border-radius: calc(var(--rep-data-radius) - 3px);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rep-data-tab:hover {
	background: rgba(255, 255, 255, 0.6);
}

/* Selected state reads via a colored ring + text, not a solid brand-color
   fill — the surface stays white/neutral regardless of which color is
   picked; the color is only ever used as a signal, never a background. */
.rep-data-tab.is-active {
	background: var(--rep-data-surface);
	color: var(--rep-data-brand-dark);
	box-shadow: inset 0 0 0 1.5px var(--rep-data-brand);
}

/*
 * Per-table view switcher (Table / Heat map / Line / Bar / Area / Donut) on
 * the "By county"/"By city" sections — a smaller, section-scoped sibling of
 * .rep-data-tabs/.rep-data-tab above, same token vocabulary, sized down to
 * sit under a section heading rather than the report's own top-level tabs.
 */
.rep-data-table-view-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	background: var(--rep-data-panel-bg);
	padding: 2px;
	border-radius: var(--rep-data-radius);
	margin: 0 0 var(--rep-data-space-sm, 10px);
}

.rep-data-table-view-tabs__tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--rep-data-brand-dark);
	font: inherit;
	font-size: 0.82em;
	font-weight: 600;
	height: 28px;
	padding: 0 10px;
	border-radius: calc(var(--rep-data-radius) - 2px);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rep-data-table-view-tabs__tab:hover {
	background: rgba(255, 255, 255, 0.6);
}

.rep-data-table-view-tabs__tab.is-active {
	background: var(--rep-data-surface);
	color: var(--rep-data-brand-dark);
	box-shadow: inset 0 0 0 1.5px var(--rep-data-brand);
}

.rep-data-table-view-caption {
	font-size: 0.85em;
	color: var(--rep-data-muted);
	margin: 0 0 var(--rep-data-space-sm, 10px);
}

.rep-data-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.rep-data-field--inline {
	flex-direction: row;
	align-items: center;
	gap: 7px;
}

.rep-data-field__label {
	font-size: var(--rep-data-meta-size);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
	white-space: nowrap;
}

.rep-data-select,
.rep-data-input {
	appearance: none;
	font: inherit;
	font-size: var(--rep-data-control-size);
	color: var(--rep-data-text);
	background: var(--rep-data-surface);
	border: 1px solid var(--rep-data-border);
	border-radius: calc(var(--rep-data-radius) - 4px);
	height: var(--rep-data-control-height);
	padding: 0 10px;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.rep-data-select {
	padding-right: 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
}

.rep-data-select:focus-visible,
.rep-data-input:focus-visible {
	outline: 2px solid var(--rep-data-brand);
	outline-offset: 0;
	border-color: var(--rep-data-brand);
}

.rep-data-field--inline .rep-data-select {
	width: auto;
}

/* Filter bar ------------------------------------------------------
 *
 * One row of uniform pill buttons, each opening a popover. Two type
 * sizes only: --rep-data-control-size for anything interactive, and
 * --rep-data-meta-size for counts and section headings.
 */

.rep-data-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--rep-data-border);
	border-radius: var(--rep-data-radius);
	background: var(--rep-data-surface);
}

.rep-data-filterbar__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.rep-data-filterbar__reset {
	appearance: none;
	margin-left: auto;
	border: 0;
	background: none;
	color: var(--rep-data-brand);
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: 600;
	cursor: pointer;
	padding: 0 6px;
	height: var(--rep-data-control-height);
	white-space: nowrap;
}

.rep-data-filterbar__reset:hover {
	text-decoration: underline;
}

.rep-data-filterbar__reset[hidden] {
	display: none;
}

.rep-data-filter {
	position: relative;
	min-width: 0;
}

.rep-data-filter__button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: var(--rep-data-control-height);
	max-width: 15rem;
	padding: 0 11px;
	border: 1px solid var(--rep-data-border);
	border-radius: 999px;
	background: var(--rep-data-surface);
	color: var(--rep-data-text);
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.rep-data-filter__button:hover {
	border-color: var(--rep-data-brand-light);
	background: var(--rep-data-brand-wash);
}

.rep-data-filter__button:focus-visible {
	outline: 2px solid var(--rep-data-brand);
	outline-offset: 1px;
}

.rep-data-filter.is-open .rep-data-filter__button {
	border-color: var(--rep-data-brand);
	background: var(--rep-data-surface);
	color: var(--rep-data-brand-dark);
}

.rep-data-filter.is-active .rep-data-filter__button {
	border-color: var(--rep-data-brand);
	background: var(--rep-data-brand);
	color: var(--rep-data-on-brand);
}

.rep-data-filter__name {
	flex: none;
}

.rep-data-filter.is-active .rep-data-filter__name::after {
	content: ":";
}

.rep-data-filter__value {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.rep-data-filter__value[hidden] {
	display: none;
}

.rep-data-filter__caret {
	flex: none;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.5;
	transition: transform 0.14s ease;
}

.rep-data-filter.is-open .rep-data-filter__caret {
	transform: rotate(180deg);
}

/* A plain on/off filter with nothing to narrow down, so it is a checkbox
   in a pill rather than a dropdown with a popover — sized to match
   .rep-data-filter__button so it sits in the bar as one of the row. */
.rep-data-filter--toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--rep-data-control-height);
	padding: 0 12px;
	border: 1px solid var(--rep-data-border);
	border-radius: 999px;
	background: var(--rep-data-surface);
	color: var(--rep-data-text);
	font-size: var(--rep-data-control-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.rep-data-filter--toggle:has(input:checked) {
	border-color: var(--rep-data-brand);
	background: var(--rep-data-surface);
	color: var(--rep-data-brand-dark);
}

.rep-data-filter--toggle input {
	accent-color: var(--rep-data-brand);
}

.rep-data-filter__popover {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 15rem;
	/* Always a little narrower than the report, so there is room to slide
	   back inside when a pill sits near an edge. */
	max-width: min(20rem, calc(100vw - 2rem), calc(100cqw - 1rem));
	padding: 8px;
	border: 1px solid var(--rep-data-border);
	border-radius: calc(var(--rep-data-radius) - 2px);
	background: var(--rep-data-surface);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.rep-data-filter__popover[hidden] {
	display: none;
}

.rep-data-filter__search {
	appearance: none;
	width: 100%;
	height: var(--rep-data-control-height);
	padding: 0 10px;
	border: 1px solid var(--rep-data-border);
	border-radius: calc(var(--rep-data-radius) - 4px);
	background: var(--rep-data-surface);
	color: var(--rep-data-text);
	font: inherit;
	font-size: var(--rep-data-control-size);
}

.rep-data-filter__search:focus-visible {
	outline: 2px solid var(--rep-data-brand);
	outline-offset: 0;
	border-color: var(--rep-data-brand);
}

.rep-data-filter__list {
	display: flex;
	flex-direction: column;
	max-height: 14.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 -2px;
	padding: 0 2px;
}

.rep-data-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 7px;
	border: 0;
	border-radius: 5px;
	background: none;
	color: var(--rep-data-text);
	font: inherit;
	font-size: var(--rep-data-control-size);
	text-align: left;
	cursor: pointer;
}

.rep-data-filter__option:hover {
	background: var(--rep-data-brand-wash);
}

.rep-data-filter__option[hidden] {
	display: none;
}

/* Sized explicitly so the box does not inherit the user agent's font
   metrics, which is the one thing in here that would not scale with the
   control type size. */
.rep-data-filter__option input[type="checkbox"] {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin: 0;
	accent-color: var(--rep-data-brand);
}

.rep-data-filter__option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rep-data-filter__option-count {
	flex: none;
	font-size: var(--rep-data-meta-size);
	color: var(--rep-data-muted);
	font-variant-numeric: tabular-nums;
}

.rep-data-filter__section {
	font-size: var(--rep-data-meta-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
	padding-top: 2px;
	border-top: 1px solid var(--rep-data-border);
}

.rep-data-filter__range-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rep-data-filter__range-row .rep-data-input {
	flex: 1 1 0;
	min-width: 0;
}

.rep-data-filter__dash {
	flex: none;
	color: var(--rep-data-muted);
	font-size: var(--rep-data-control-size);
}

.rep-data-filter__clear {
	align-self: flex-start;
	border: 0;
	background: none;
	color: var(--rep-data-brand);
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: 600;
	cursor: pointer;
	padding: 2px 5px;
}

.rep-data-filter__clear:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------
 * KPI cards
 * ---------------------------------------------------------------- */

/* The KPI block spaces itself with a flex gap rather than margins on its
   children. Page builders routinely ship negative-margin utilities, and a
   gap is not a margin, so nothing can pull the callout up over the cards. */
.rep-data-section--kpis {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rep-data-kpis {
	--rep-data-kpi-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--rep-data-kpi-columns), minmax(0, 1fr));
	gap: 10px;
}

/* Scoped one level deeper than a bare .rep-data-kpi so a theme cannot take the
   cards out of flow and drop them on top of what follows. */
.rep-data-report .rep-data-kpi {
	position: relative;
}

.rep-data-kpi {
	background: var(--rep-data-kpi-bg, var(--rep-data-surface));
	border: 1px solid var(--rep-data-border);
	border-left: 3px solid var(--rep-data-brand);
	border-radius: var(--rep-data-radius);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	box-shadow: var(--rep-data-shadow);
}

.rep-data-kpi--price {
	border-left-color: var(--rep-data-accent);
}

.rep-data-kpi--pace {
	border-left-color: var(--rep-data-brand-light);
}

.rep-data-kpi--property {
	border-left-color: var(--rep-data-muted);
}

/* Key for the KPI cards' left-edge accent color, above -- only rendered
   when a report actually mixes two or more groups (see renderKpis() in
   public.js), so a single-group report never shows a pointless one-item key. */
.rep-data-kpi-legend {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.rep-data-kpi-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--rep-data-muted);
}

.rep-data-kpi-legend__swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rep-data-brand);
	flex-shrink: 0;
}

.rep-data-kpi-legend__swatch--price {
	background: var(--rep-data-accent);
}

.rep-data-kpi-legend__swatch--pace {
	background: var(--rep-data-brand-light);
}

.rep-data-kpi-legend__swatch--property {
	background: var(--rep-data-muted);
}

.rep-data-kpi__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
	line-height: 1.3;
}

.rep-data-kpi__value {
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--rep-data-text);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.rep-data-kpi__delta {
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

.rep-data-kpi__delta--up {
	color: #1f7a4d;
}

.rep-data-kpi__delta--down {
	color: #b03030;
}

.rep-data-kpi__delta--flat {
	color: var(--rep-data-muted);
}

.rep-data-kpi--has-info {
	cursor: pointer;
	padding-right: 30px;
	transition: box-shadow 0.14s ease, border-color 0.14s ease;
}

.rep-data-kpi--has-info:hover,
.rep-data-kpi--has-info:focus-visible {
	border-color: var(--rep-data-brand);
	box-shadow: 0 0 0 1px var(--rep-data-brand);
}

.rep-data-kpi--has-info:focus-visible {
	outline: none;
}

.rep-data-kpi__info {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--rep-data-brand-wash);
	color: var(--rep-data-brand);
	font-size: 0.62rem;
	font-weight: 700;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1;
}

.rep-data-kpi__tooltip {
	position: absolute;
	z-index: 25;
	width: 15rem;
	max-width: min(15rem, calc(100cqw - 1rem));
	padding: 10px 12px;
	border: 1px solid var(--rep-data-border);
	border-radius: calc(var(--rep-data-radius) - 2px);
	background: var(--rep-data-surface);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
	font-size: 0.78rem;
	line-height: 1.5;
}

.rep-data-kpi__tooltip[hidden] {
	display: none;
}

.rep-data-kpi__tooltip-label {
	display: block;
	margin-bottom: 4px;
	color: var(--rep-data-brand);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rep-data-kpi__tooltip p {
	margin: 0;
	color: var(--rep-data-text);
}

/* -------------------------------------------------------------------
 * Year-over-year — one row of KPI-style cards per metric, columns
 * being the selected month and each configured year offset back.
 * ---------------------------------------------------------------- */

.rep-data-yoy {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.rep-data-yoy__row-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
}

.rep-data-yoy__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.rep-data-yoy__card.is-empty {
	opacity: 0.55;
}

.rep-data-kpi__period {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
	margin-bottom: 2px;
}

.rep-data-report .rep-data-callout {
	margin: 0;
}

.rep-data-callout {
	padding: 11px 14px;
	border-radius: var(--rep-data-radius);
	/* Neutral panel — see .rep-data-ai's own comment above; the left
	   accent border is this callout's only use of the brand color. */
	background: var(--rep-data-panel-bg);
	border-left: 3px solid var(--rep-data-brand);
	font-size: 0.88rem;
}

.rep-data-callout--sellers {
	border-left-color: #1f7a4d;
}

.rep-data-callout--buyers {
	border-left-color: #b03030;
}

.rep-data-growth-list {
	list-style: none;
	counter-reset: rep-data-growth;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	border-radius: var(--rep-data-radius);
	overflow: hidden;
	border: 1px solid var(--rep-data-border);
}

.rep-data-growth-list__item {
	counter-increment: rep-data-growth;
	display: grid;
	/* pcts capped at 45% (not auto/max-content) so a long dataset/area
	   name in its inline "of X" wraps onto its own line there instead of
	   stretching this whole column — and the row — to fit it. */
	grid-template-columns: 1.6em 1fr minmax(0, 45%);
	align-items: baseline;
	gap: 10px;
	padding: 9px 14px;
	background: var(--rep-data-surface);
	font-size: 0.88rem;
}

.rep-data-growth-list__item::before {
	content: counter(rep-data-growth);
	font-weight: 700;
	color: var(--rep-data-brand);
}

/* Rank's counterpart on the left: the area's name stacked above how many
   of ITS OWN listings are new construction (a plain count, not a
   percentage — the two percentages on the right already cover the
   percentage reading of this same figure). */
.rep-data-growth-list__info {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.rep-data-growth-list__name {
	font-weight: 600;
}

.rep-data-growth-list__count {
	color: var(--rep-data-muted);
	font-size: var(--rep-data-meta-size);
	white-space: nowrap;
}

/* Two figures, same rank: the region-wide share this ranking sorts by
   (bold, brand-colored — the number that decided this area's position)
   stacked above the same area's own local share (muted, smaller — how
   concentrated new construction is within that one market alone). Each
   is one line — number and its "of X" together — so this column stays
   two lines tall, matching .rep-data-growth-list__info's own name+count
   pair on the left instead of running taller than it. */
.rep-data-growth-list__pcts {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	line-height: 1.3;
	min-width: 0;
}

.rep-data-growth-list__pct {
	font-weight: 700;
	color: var(--rep-data-brand);
	white-space: nowrap;
}

.rep-data-growth-list__pct-secondary {
	color: var(--rep-data-muted);
	font-size: var(--rep-data-meta-size);
	font-weight: 400;
	white-space: nowrap;
}

/* The "of X" naming what each percentage is a share of (region for the
   bold ranking figure, this row's own area for the muted one) — inline
   right after its number, quieter than either (lighter weight, muted,
   slightly smaller than the secondary line's own already-small text) so
   a longer dataset/area name reads as a soft annotation, not a second
   stat competing with the number. Only wraps to its own line if the row
   is too narrow to fit both on one (mobile @container below). */
.rep-data-growth-list__pct-of {
	font-size: 0.85em;
	font-weight: 400;
	color: var(--rep-data-muted);
	opacity: 0.85;
	/* Resets the nowrap it would otherwise inherit from .pct/.pct-secondary
	   above — those stay nowrap (the number itself must never break), but
	   this span is exactly where a long name should be free to wrap. */
	white-space: normal;
}

@container (max-width: 560px) {
	.rep-data-growth-list__item {
		grid-template-columns: 1.4em 1fr;
		grid-template-areas: "rank info" "rank pcts";
		row-gap: 4px;
	}
	.rep-data-growth-list__item::before { grid-area: rank; }
	.rep-data-growth-list__info { grid-area: info; }
	.rep-data-growth-list__pcts {
		grid-area: pcts;
		align-items: flex-start;
		text-align: left;
	}
}

/* The explanation of the two percentages, always visible in the
   no-JS/print report (there is nothing to press there — see the "i"
   button variant below for the interactive, JS-hydrated equivalent). */
.rep-data-section__note {
	margin: -4px 0 10px;
	color: var(--rep-data-muted);
	font-size: var(--rep-data-meta-size);
	line-height: 1.5;
}

.rep-data-section__note strong {
	color: var(--rep-data-text);
	font-weight: 600;
}

/* The interactive equivalent of .rep-data-section__note — a small "i"
   button appended inside a section's <h3> (see .rep-data-section__title
   below, given display:flex so an appended button sits inline with the
   text rather than wrapping under it) that opens the same shared
   ReportApp.prototype.toggleMetricInfo() popover the KPI cards' own
   info icons use (see .rep-data-kpi__info/__tooltip below), rather than
   a permanently-visible paragraph, once JS has hydrated the report. */
.rep-data-section__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--rep-data-brand-wash);
	color: var(--rep-data-brand);
	font: 700 0.72rem/1 var(--rep-data-font, inherit);
	cursor: pointer;
	padding: 0;
}

.rep-data-section__info:hover,
.rep-data-section__info:focus-visible {
	background: var(--rep-data-brand);
	color: #fff;
	outline: none;
}

/* -------------------------------------------------------------------
 * AI summary
 * ---------------------------------------------------------------- */

.rep-data-report .rep-data-ai {
	position: relative;
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid var(--rep-data-border);
	border-left: 3px solid var(--rep-data-brand);
	border-radius: var(--rep-data-radius);
	/* Neutral panel, not a tint of the chosen brand color — the left
	   accent border above is the only place this card's color shows.
	   See --rep-data-panel-bg's own definition ("independent of the
	   brand colour — ... anywhere else that should read as a calm
	   background rather than a tint of whatever colour the agent
	   picked"), which this card is exactly the "anywhere else" of. */
	background: var(--rep-data-panel-bg);
}

.rep-data-report .rep-data-ai[hidden] {
	display: none;
}

/* A distinct class from .rep-data-table-view-tabs — different DOM
 * context (summary titles, not chart-type switches) even though the
 * visual language matches today. */
.rep-data-ai-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	background: var(--rep-data-panel-bg);
	padding: 2px;
	border-radius: var(--rep-data-radius);
	margin: 0 0 var(--rep-data-space-sm, 10px);
}

.rep-data-ai-tabs__tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--rep-data-brand-dark);
	font: inherit;
	font-size: 0.82em;
	font-weight: 600;
	height: 28px;
	padding: 0 10px;
	border-radius: calc(var(--rep-data-radius) - 2px);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rep-data-ai-tabs__tab:hover {
	background: rgba(255, 255, 255, 0.6);
}

.rep-data-ai-tabs__tab.is-active {
	background: var(--rep-data-surface);
	color: var(--rep-data-brand-dark);
	box-shadow: inset 0 0 0 1.5px var(--rep-data-brand);
}

.rep-data-report .rep-data-ai__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 8px;
}

.rep-data-report .rep-data-ai__label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rep-data-brand);
}

.rep-data-report .rep-data-ai__scope {
	margin: 0;
	font-size: var(--rep-data-meta-size);
	color: var(--rep-data-muted);
}

.rep-data-report .rep-data-ai__headline {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.rep-data-report .rep-data-ai__body {
	font-size: 0.92rem;
	line-height: 1.65;
}

.rep-data-report .rep-data-ai__body p {
	margin: 0 0 10px;
}

.rep-data-report .rep-data-ai__body p:last-child,
.rep-data-report .rep-data-ai__body ul:last-child {
	margin-bottom: 0;
}

.rep-data-report .rep-data-ai__list {
	margin: 0 0 10px;
	padding-left: 20px;
}

.rep-data-report .rep-data-ai__list li {
	margin: 0 0 4px;
}

.rep-data-report .rep-data-ai__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 12px 0 0;
	font-size: var(--rep-data-meta-size);
	color: var(--rep-data-muted);
}

.rep-data-report .rep-data-ai__updated::after {
	content: "·";
	margin-left: 8px;
}

.rep-data-report .rep-data-ai__updated:last-child::after {
	content: none;
}

/* -------------------------------------------------------------------
 * Sections, tables
 * ---------------------------------------------------------------- */

.rep-data-section {
	margin: 0 0 26px;
}

.rep-data-section:last-child {
	margin-bottom: 0;
}

.rep-data-section__head {
	margin-bottom: 10px;
}

.rep-data-section__title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--rep-data-text);
}

.rep-data-section__subtitle {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: var(--rep-data-muted);
}

.rep-data-chart__note {
	margin: 6px 0 0;
	font-size: 0.72rem;
	font-style: italic;
	color: var(--rep-data-muted);
}

.rep-data-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--rep-data-border);
	border-radius: var(--rep-data-radius);
	-webkit-overflow-scrolling: touch;
}

.rep-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.83rem;
	background: var(--rep-data-surface);
}

.rep-data-table th,
.rep-data-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid var(--rep-data-border);
	white-space: nowrap;
}

.rep-data-table thead th {
	background: var(--rep-data-brand-wash);
	color: var(--rep-data-brand-dark);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 1;
}

.rep-data-table tbody th {
	font-weight: 600;
}

.rep-data-table td.is-numeric,
.rep-data-table th.is-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.rep-data-table tbody tr:last-child th,
.rep-data-table tbody tr:last-child td {
	border-bottom: 0;
}

.rep-data-table tbody tr:hover {
	background: color-mix(in srgb, var(--rep-data-brand-wash) 55%, transparent);
}

.rep-data-table__other {
	font-style: italic;
	color: var(--rep-data-muted);
}

.rep-data-table__sort {
	appearance: none;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	font-weight: inherit;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.rep-data-table__sort::after {
	content: "⇅";
	opacity: 0.35;
	font-size: 0.85em;
}

.rep-data-table th[aria-sort="ascending"] .rep-data-table__sort::after {
	content: "▲";
	opacity: 1;
}

.rep-data-table th[aria-sort="descending"] .rep-data-table__sort::after {
	content: "▼";
	opacity: 1;
}

/* -------------------------------------------------------------------
 * Charts
 * ---------------------------------------------------------------- */

.rep-data-chart-host {
	margin-bottom: 12px;
}

.rep-data-chart {
	position: relative;
}

.rep-data-chart__canvas {
	width: 100%;
	overflow: hidden;
}

.rep-data-chart__svg {
	display: block;
	max-width: 100%;
	overflow: visible;
}

.rep-data-chart__grid {
	stroke: var(--rep-data-border);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}

.rep-data-chart__axis-line {
	stroke: var(--rep-data-border);
	stroke-width: 1;
}

.rep-data-chart__tick {
	font-size: 11px;
	fill: var(--rep-data-muted);
	font-family: var(--rep-data-font);
}

.rep-data-chart__value {
	font-size: 11px;
	font-weight: 600;
	fill: var(--rep-data-text);
	font-family: var(--rep-data-font);
}

.rep-data-chart__cell-value {
	font-size: 10px;
	font-weight: 600;
	font-family: var(--rep-data-font);
	pointer-events: none;
}

.rep-data-chart__center-value {
	font-size: 20px;
	font-weight: 700;
	fill: var(--rep-data-text);
	font-family: var(--rep-data-font);
}

.rep-data-chart__center-label {
	font-size: 11px;
	fill: var(--rep-data-muted);
	font-family: var(--rep-data-font);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rep-data-chart__crosshair {
	stroke: var(--rep-data-brand);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	pointer-events: none;
}

.rep-data-chart__bar,
.rep-data-chart__slice,
.rep-data-chart__cell {
	transition: opacity 0.12s ease;
}

.rep-data-chart__bar:hover,
.rep-data-chart__slice:hover,
.rep-data-chart__cell:hover {
	opacity: 0.82;
}

/* An explicit display value would otherwise defeat the hidden attribute. */
.rep-data-chart__legend[hidden] {
	display: none;
}

.rep-data-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	font-size: 0.78rem;
	color: var(--rep-data-muted);
}

.rep-data-chart__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* A line/area chart's legend items are real <button>s (click to toggle
   that series on/off — see charts.js drawLegend()); every other chart
   type's stays a plain, non-interactive <span>, so these resets only
   need to undo default button chrome, never touch the <span> case. */
button.rep-data-chart__legend-item {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 2px 4px;
	margin: -2px -4px;
	border-radius: var(--rep-radius-sm, 4px);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--rep-transition-fast, 120ms ease), opacity var(--rep-transition-fast, 120ms ease);
}

button.rep-data-chart__legend-item:hover,
button.rep-data-chart__legend-item:focus-visible {
	background: var(--rep-data-panel-bg, rgba(0, 0, 0, 0.05));
}

button.rep-data-chart__legend-item.is-off {
	opacity: 0.5;
	text-decoration: line-through;
}

.rep-data-chart__swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex: none;
	display: inline-block;
	background: var(--rep-data-chart-swatch-color, currentColor);
	border: 1.5px solid var(--rep-data-chart-swatch-color, currentColor);
	box-sizing: border-box;
}

.is-off .rep-data-chart__swatch {
	background: transparent;
}

.rep-data-chart__scale {
	display: inline-block;
	width: clamp(80px, 30%, 200px);
	height: 10px;
	border-radius: 5px;
}

.rep-data-chart__scale-label {
	font-variant-numeric: tabular-nums;
}

.rep-data-chart__tooltip {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	background: var(--rep-data-text);
	color: #fff;
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 0.76rem;
	line-height: 1.45;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	max-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rep-data-chart__tooltip[hidden] {
	display: none;
}

.rep-data-chart__tooltip-title {
	font-size: 0.78rem;
	margin-bottom: 2px;
}

.rep-data-chart__tooltip-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rep-data-chart__tooltip-name {
	opacity: 0.8;
	margin-right: auto;
}

.rep-data-chart__tooltip-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rep-data-chart__empty {
	margin: 0;
	padding: 32px 12px;
	text-align: center;
	color: var(--rep-data-muted);
	font-size: 0.85rem;
	background: var(--rep-data-brand-wash);
	border-radius: var(--rep-data-radius);
}

.rep-data-disclaimer {
	margin-top: 20px;
	padding-top: 12px;
	border-top: 1px solid var(--rep-data-border);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--rep-data-muted);
}

.rep-data-disclaimer p {
	margin: 0 0 5px;
}

.rep-data-disclaimer__generated {
	font-style: italic;
}

/* -------------------------------------------------------------------
 * States
 * ---------------------------------------------------------------- */

.rep-data-notice,
.rep-data-empty,
.rep-data-error {
	padding: 26px 18px;
	text-align: center;
	border: 1px dashed var(--rep-data-border);
	border-radius: var(--rep-data-radius);
	color: var(--rep-data-muted);
	font-size: 0.9rem;
}

.rep-data-empty p,
.rep-data-error p {
	margin: 0 0 4px;
}

.rep-data-empty__hint {
	font-size: 0.8rem;
	opacity: 0.85;
}

.rep-data-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	max-width: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------
 * Template variants
 * ---------------------------------------------------------------- */

.rep-data-template-compact .rep-data-kpi {
	padding: 9px 11px;
}

.rep-data-template-compact .rep-data-kpi__value {
	font-size: clamp(0.95rem, 1.8vw, 1.2rem);
}

.rep-data-template-compact .rep-data-header {
	margin-bottom: 12px;
	padding-bottom: 9px;
}

.rep-data-template-executive .rep-data-kpi {
	padding: 18px 20px;
	text-align: center;
	align-items: center;
	border-left: 0;
	border-top: 3px solid var(--rep-data-brand);
}

.rep-data-template-executive .rep-data-kpi__value {
	font-size: clamp(1.4rem, 3.2vw, 2.1rem);
}

.rep-data-template-dashboard .rep-data-views {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.rep-data-template-dashboard .rep-data-section:first-child {
	grid-column: 1 / -1;
}

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

@container (max-width: 900px) {
	.rep-data-kpis {
		grid-template-columns: repeat(min(var(--rep-data-kpi-columns), 3), minmax(0, 1fr));
	}
}

@container (max-width: 640px) {
	.rep-data-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rep-data-template-dashboard .rep-data-views {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (max-width: 420px) {
	.rep-data-kpis {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Narrow screens centre the whole control layer. Left-aligned rows of
   wrapped pills and tabs read as ragged once they break onto three or four
   lines; centred, the block stays tidy however it wraps. */
@container (max-width: 700px) {
	.rep-data-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.rep-data-controls__bar,
	.rep-data-controls__right,
	.rep-data-category-tabs,
	.rep-data-tabs,
	.rep-data-filterbar,
	.rep-data-filterbar__items {
		justify-content: center;
	}

	.rep-data-controls__right {
		margin-left: 0;
		width: 100%;
	}

	.rep-data-filterbar__reset {
		margin-left: 0;
	}

}

/* Container queries are progressive enhancement; keep viewport
   fallbacks for older browsers. */
@media (max-width: 782px) {
	.rep-data-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.rep-data-controls__bar,
	.rep-data-controls__right,
	.rep-data-category-tabs,
	.rep-data-tabs,
	.rep-data-filterbar,
	.rep-data-filterbar__items {
		justify-content: center;
	}

	.rep-data-controls__right {
		margin-left: 0;
		width: 100%;
	}

	.rep-data-filterbar__reset {
		margin-left: 0;
	}

	.rep-data-field--inline {
		flex: 0 1 auto;
	}

	.rep-data-table thead th {
		position: static;
	}

}

@media (max-width: 600px) {
	.rep-data-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------
 * Dark mode — only when the theme opts in via colour-scheme
 * ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.rep-data-report[data-rep-data-root] {
		--rep-data-border: rgba(255, 255, 255, 0.14);
		--rep-data-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	}
}

/* -------------------------------------------------------------------
 * Visual style presets
 *
 * Eight interchangeable "looks" for the same report, picked in Branding
 * settings. Each is scoped under a .rep-data-style-{key} class on the report
 * root and works by redefining the custom properties component rules
 * already read (--rep-data-shadow, --rep-data-radius, --rep-data-kpi-bg and so on)
 * rather than rewriting each component per style — most of a style is
 * just a different set of variable values, with a handful of explicit
 * overrides where a variable alone cannot express the difference (a
 * heading typeface, a border side, an uppercase treatment). "Classic" is
 * the base look these variables already default to and needs no block.
 *
 * A color-mix() based tint or gradient is used only where it is purely
 * decorative — never for the brand/accent colours themselves, which stay
 * plain resolvable colours (see css_variables()) since --rep-data-on-brand
 * and the hover/tint shades must be computable in PHP from an actual
 * colour, including when "use theme styles" points --rep-data-brand at a
 * theme's own custom property.
 * ---------------------------------------------------------------- */

/* Modern Gradient — soft gradient washes, larger corners, a glow lift.
   Compounded with every feature's own root class (rather than a bare
   .rep-data-style-gradient) so this outranks that feature's own base variable
   block on the properties both declare — Tools, Listings and Forms each
   ship a self-contained default block (so the shortcode works even if
   rep-data-public.css failed to enqueue) with the SAME custom properties as
   .rep-data-report's own defaults; at equal specificity the later-loaded
   stylesheet would otherwise win, silently keeping those features on
   their own light-mode defaults regardless of the chosen style. */
.rep-data-report.rep-data-style-gradient,
.rep-data-listings.rep-data-style-gradient,
.rep-data-tools.rep-data-style-gradient,
.rep-data-form.rep-data-style-gradient {
	--rep-data-radius: 14px;
	--rep-data-kpi-bg: linear-gradient(135deg, var(--rep-data-brand-wash), var(--rep-data-surface) 70%);
	--rep-data-card-bg: linear-gradient(135deg, var(--rep-data-brand-wash), var(--rep-data-surface) 75%);
	--rep-data-btn-bg: linear-gradient(135deg, var(--rep-data-brand), var(--rep-data-brand-dark));
	--rep-data-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 14px 28px -10px var(--rep-data-brand-light);
}

.rep-data-style-gradient .rep-data-kpi {
	border-left: none;
	border-top: 3px solid var(--rep-data-brand);
}

.rep-data-style-gradient .rep-data-callout {
	background: linear-gradient(135deg, var(--rep-data-brand-wash), var(--rep-data-surface) 80%);
	border-left: none;
	border-top: 3px solid var(--rep-data-brand);
}

/* High Contrast — bold borders, no shadows, built to be read at a glance. */
.rep-data-report.rep-data-style-contrast,
.rep-data-listings.rep-data-style-contrast,
.rep-data-tools.rep-data-style-contrast,
.rep-data-form.rep-data-style-contrast {
	--rep-data-radius: 2px;
	--rep-data-surface: #fff;
	--rep-data-text: #000;
	--rep-data-muted: #333;
	--rep-data-border: var(--rep-data-text);
	--rep-data-shadow: none;
	--rep-data-brand-wash: transparent;
}

.rep-data-style-contrast .rep-data-kpi,
.rep-data-style-contrast .rep-data-btn {
	border-width: 2px;
	box-shadow: none;
}

.rep-data-style-contrast .rep-data-kpi {
	border-left-width: 8px;
}

.rep-data-style-contrast .rep-data-btn--primary {
	border: 2px solid var(--rep-data-brand);
}

.rep-data-style-contrast .rep-data-table thead th {
	background: var(--rep-data-text);
	color: var(--rep-data-surface);
}

.rep-data-style-contrast .rep-data-callout {
	border: 2px solid var(--rep-data-brand);
	border-left-width: 8px;
	background: transparent;
}

/* Sleek Dark — a dark, premium surface with a bright accent. */
.rep-data-report.rep-data-style-sleek,
.rep-data-listings.rep-data-style-sleek,
.rep-data-tools.rep-data-style-sleek,
.rep-data-form.rep-data-style-sleek {
	--rep-data-surface: #1a1d24;
	--rep-data-panel-bg: #21252e;
	--rep-data-text: #e7e9ee;
	--rep-data-muted: #9aa1ad;
	--rep-data-border: rgba(255, 255, 255, 0.1);
	--rep-data-radius: 12px;
	--rep-data-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.35);
}

.rep-data-style-sleek .rep-data-kpi {
	border-left-width: 2px;
}

.rep-data-style-sleek .rep-data-table thead th {
	background: rgba(255, 255, 255, 0.06);
	color: var(--rep-data-text);
}

.rep-data-style-sleek .rep-data-callout {
	background: rgba(255, 255, 255, 0.06);
}

/* The tooltip's background is normally --rep-data-text on the assumption
   that colour is dark; here it is light, so pin the tooltip explicitly
   rather than inheriting a light-on-light combination. */
.rep-data-style-sleek .rep-data-chart__tooltip {
	background: #0c0e12;
	color: #f2f3f5;
}

/* Minimalist — no shadows, hairline borders, generous whitespace. */
.rep-data-report.rep-data-style-minimal,
.rep-data-listings.rep-data-style-minimal,
.rep-data-tools.rep-data-style-minimal,
.rep-data-form.rep-data-style-minimal {
	--rep-data-shadow: none;
	--rep-data-radius: 4px;
}

.rep-data-style-minimal .rep-data-kpi {
	border-left: none;
	border: 1px solid var(--rep-data-border);
	padding: 16px 18px;
}

.rep-data-style-minimal .rep-data-callout {
	box-shadow: none;
}

.rep-data-style-minimal .rep-data-callout {
	background: transparent;
	border: 1px solid var(--rep-data-border);
	border-left: 3px solid var(--rep-data-brand);
}

.rep-data-style-minimal .rep-data-table thead th {
	background: transparent;
	color: var(--rep-data-text);
	border-bottom: 2px solid var(--rep-data-text);
}

/* Luxury Editorial — a serif display face, an ivory surface, thin rules. */
.rep-data-report.rep-data-style-editorial,
.rep-data-listings.rep-data-style-editorial,
.rep-data-tools.rep-data-style-editorial,
.rep-data-form.rep-data-style-editorial {
	--rep-data-surface: #fffdf9;
	--rep-data-panel-bg: #faf6ec;
	--rep-data-radius: 2px;
	--rep-data-border: #e4dcc8;
	--rep-data-shadow: none;
}

.rep-data-style-editorial .rep-data-section__title,
.rep-data-style-editorial .rep-data-kpi__value,
.rep-data-style-editorial .rep-data-header__title {
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-weight: 400;
}

.rep-data-style-editorial .rep-data-kpi {
	border: none;
	border-top: 1px solid var(--rep-data-border);
	border-radius: 0;
	box-shadow: none;
}

.rep-data-style-editorial .rep-data-kpi__label {
	letter-spacing: 0.12em;
}

.rep-data-style-editorial .rep-data-table thead th {
	background: transparent;
	color: var(--rep-data-text);
	letter-spacing: 0.08em;
	border-bottom: 2px solid var(--rep-data-text);
}

.rep-data-style-editorial .rep-data-callout {
	background: transparent;
	border: 1px solid var(--rep-data-border);
	border-left: 2px solid var(--rep-data-brand);
}

/* Bold Card — big rounded cards in tinted colour blocks, a strong lift. */
.rep-data-report.rep-data-style-bold,
.rep-data-listings.rep-data-style-bold,
.rep-data-tools.rep-data-style-bold,
.rep-data-form.rep-data-style-bold {
	--rep-data-radius: 20px;
	--rep-data-kpi-bg: color-mix(in srgb, var(--rep-data-brand) 7%, var(--rep-data-surface));
	--rep-data-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.22);
}

.rep-data-style-bold .rep-data-kpi {
	border: none;
	border-bottom: 4px solid var(--rep-data-brand);
}

.rep-data-style-bold .rep-data-kpi--price {
	background: color-mix(in srgb, var(--rep-data-accent) 7%, var(--rep-data-surface));
	border-bottom-color: var(--rep-data-accent);
}

.rep-data-style-bold .rep-data-btn--primary {
	border-radius: 999px;
}

.rep-data-style-bold .rep-data-callout {
	border-radius: var(--rep-data-radius);
	border-left-width: 6px;
}

/* Corporate Professional — a structured, conservative grid. */
.rep-data-report.rep-data-style-corporate,
.rep-data-listings.rep-data-style-corporate,
.rep-data-tools.rep-data-style-corporate,
.rep-data-form.rep-data-style-corporate {
	--rep-data-radius: 4px;
	--rep-data-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.rep-data-style-corporate .rep-data-kpi {
	border-left-width: 4px;
}

.rep-data-style-corporate .rep-data-section__title {
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

.rep-data-style-corporate .rep-data-table thead th {
	letter-spacing: 0.05em;
	font-weight: 700;
}

/* NWA Professional — square corners, hairline rules, no shadows, heavy-
   tracked uppercase labels. A civic/survey-sheet feel rather than a
   software-dashboard one. Unlike Sleek Dark or Luxury Editorial, this is
   not a fixed palette — text, muted text, card background, page
   background, corner radius and typeface all keep coming from the
   Branding settings for this style (see the classic/nwa check in
   MarketDataShortcode::css_variables()), the same as Classic. Only the
   flourishes with no corresponding setting are fixed here. */
.rep-data-report.rep-data-style-nwa,
.rep-data-listings.rep-data-style-nwa,
.rep-data-tools.rep-data-style-nwa,
.rep-data-form.rep-data-style-nwa {
	--rep-data-shadow: none;
	--rep-data-border: #E4E4E4;
	/* White text on an unmixed brand blue (e.g. the kit's own #0095EB)
	   measures as low as 3.23:1, short of WCAG AA's 4.5:1 — the reference
	   kit's own fix is a darker button fill (~7:1), derived here rather
	   than fixed to one hex so it still tracks whatever brand colour is
	   configured. */
	--rep-data-btn-bg: color-mix(in srgb, var(--rep-data-brand) 60%, black);
}

.rep-data-style-nwa .rep-data-btn--primary {
	border-color: var(--rep-data-btn-bg);
}

/* Interactive controls (selects, inputs, buttons) get the kit's own
   --nwa-hairline (#C9C9C9), one step darker than the general --rep-data-border
   rule above, matching the reference kit's distinction between dividers
   and control borders — without it, a select on a white surface has too
   little contrast to read as a bounded control. */
.rep-data-style-nwa .rep-data-select,
.rep-data-style-nwa .rep-data-input,
.rep-data-style-nwa .rep-data-btn {
	border-color: #C9C9C9;
}

.rep-data-style-nwa .rep-data-kpi {
	border: 1px solid var(--rep-data-border);
	border-left: none;
	box-shadow: none;
}

.rep-data-style-nwa .rep-data-kpi__label {
	letter-spacing: 0.14em;
	font-size: 0.68rem;
}

.rep-data-style-nwa .rep-data-section__title,
.rep-data-style-nwa .rep-data-header__title {
	border-bottom: 2.5px solid var(--rep-data-text);
	letter-spacing: -0.012em;
}

.rep-data-style-nwa .rep-data-group__title {
	letter-spacing: 0.09em;
}

.rep-data-style-nwa .rep-data-table thead th {
	border-bottom: 2px solid var(--rep-data-text);
	letter-spacing: 0.11em;
	font-size: 0.68rem;
}

.rep-data-style-nwa .rep-data-table tfoot td {
	border-top: 2px solid var(--rep-data-text);
}

.rep-data-style-nwa .rep-data-callout {
	border-left-width: 4px;
}

.rep-data-style-nwa .rep-data-callout__title,
.rep-data-style-nwa .rep-data-callout b {
	letter-spacing: 0.09em;
}

.rep-data-style-nwa .rep-data-btn {
	letter-spacing: 0.09em;
	font-weight: 600;
}

/* -------------------------------------------------------------------
 * Print / PDF
 * ---------------------------------------------------------------- */

@media print {
	.rep-data-report {
		box-shadow: none;
		padding: 0;
		width: 100%;
		max-width: 100%;
		color: #000;
		background: #fff;
	}

	.rep-data-table__sort::after,
	.rep-data-kpi__info,
	.rep-data-kpi__tooltip,
	.rep-data-section__info {
		display: none !important;
	}

	.rep-data-kpi--has-info {
		cursor: default;
		padding-right: 14px;
	}

	.rep-data-ai {
		break-inside: avoid;
		page-break-inside: avoid;
		background: #f7f9fb !important;
	}

	.rep-data-section {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 16px;
	}

	.rep-data-kpis {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 6px;
	}

	.rep-data-kpi {
		box-shadow: none;
		padding: 8px 10px;
		break-inside: avoid;
	}

	.rep-data-kpi__value {
		font-size: 1rem;
	}

	.rep-data-table {
		font-size: 0.68rem;
	}

	.rep-data-table th,
	.rep-data-table td {
		padding: 4px 6px;
	}

	.rep-data-table thead {
		display: table-header-group;
	}

	.rep-data-table-wrap {
		overflow: visible;
	}

	.rep-data-chart__tooltip {
		display: none !important;
	}

	.rep-data-disclaimer {
		break-inside: avoid;
		font-size: 0.62rem;
	}

	.rep-data-table__other {
		font-style: italic;
	}

	@page {
		margin: 12mm;
	}
}