/**
 * Real Estate Data Pro — the redesigned public Report page.
 *
 * Everything here reads through the same --rep-data-* alias layer
 * data.css defines on .rep-data-report (this page's own wrapper carries
 * that class too — see public/views/report-single.php), which in turn
 * reads Real Estate Pro Core's resolved --rep-* Design tokens. Nothing
 * in this file is a fixed color/font/shadow value — the whole page
 * re-skins itself the moment the site's Design template/brand color
 * changes, with nothing here to update. Motion durations come from
 * --rep-transition-* (Core's own None/Subtle/Smooth/Lively animation
 * setting) for the same reason — see public/js/report-page.js, which
 * reads those same tokens for its own JS-driven animation.
 *
 * Visual register: an "instrument panel" reading — hairline-bordered
 * data grids, tabular figures, small tracked-caps labels standing in
 * for a survey plate's reference marks — the same register Core's
 * "Signal" default Design Template already names itself after (see
 * RealEstatePro\Core\Design\Templates::all()'s own description: "an
 * instrument-panel register built for data-dense reports"). This file
 * only adds a --rep-data-report-mono stack (a system-only monospace,
 * the same no-web-font-load stack Templates::FONT_STACKS['mono']
 * already offers as a selectable font elsewhere in the suite) for
 * labels/numerals that want a fixed-width, technical-drafting feel
 * regardless of whichever brand font the site's Design Template picks
 * for --rep-font — everything else here still reads --rep-font,
 * --rep-data-brand and friends exactly as before, so a Design Template
 * or color change still re-skins this page with nothing to update.
 */

.rep-data-report-page__wrap {
	--rep-data-report-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Undo .rep-data-report's boxed-card treatment (border/shadow/padding) —
   this page is a full standalone web page, not a card embedded in
   something else. Every color/font/radius custom property it defines
   stays in force; only the box model changes. */
.rep-data-report-page__wrap {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
	background: var(--rep-data-page-bg);
	overflow-x: hidden;
}

body.rep-data-report-page {
	margin: 0;
	background: var(--rep-data-page-bg);
}

/* -----------------------------------------------------------------
 * Sticky top bar
 * -------------------------------------------------------------- */

.rep-data-report-page__topbar {
	/* Fixed (not sticky/in-flow): it starts invisible and translated
	   off-screen until the hero scrolls past, and a sticky element still
	   reserves its own box in normal flow even while transformed out of
	   view — that reserved, empty --rep-data-surface-colored strip at the
	   very top of the page (before the hero's own gradient/background
	   ever begins) was the "white bar" this fixes. Fixed removes it from
	   flow entirely, so the hero starts at the true top of the page. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rep-space-md);
	padding: var(--rep-space-sm) clamp(20px, 5vw, 64px);
	background: var(--rep-data-surface);
	border-bottom: 1px solid var(--rep-data-border);
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity var(--rep-transition-normal, 200ms ease), transform var(--rep-transition-normal, 200ms ease);
	pointer-events: none;
}

.rep-data-report-page__topbar.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* This page never calls get_header(), but wp_footer() still renders the
   WP admin toolbar for a logged-in visitor with the capability to see it
   — its own fixed bar sits at top:0 too, so the revealed topbar needs to
   drop below it rather than render underneath, matching the same
   breakpoint WP core's own admin-bar CSS uses. */
body.admin-bar .rep-data-report-page__topbar.is-visible {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .rep-data-report-page__topbar.is-visible {
		top: 46px;
	}
}

.rep-data-report-page__topbar-brand {
	display: flex;
	align-items: center;
	font-weight: var(--rep-weight-semibold, 600);
	color: var(--rep-data-text);
}

.rep-data-report-page__topbar-brand img {
	max-height: 32px;
	width: auto;
	display: block;
}

.rep-data-report-page__topbar-copy {
	appearance: none;
	display: inline-block;
	border: 1px solid var(--rep-data-border);
	background: transparent;
	color: var(--rep-data-text);
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: var(--rep-weight-semibold, 600);
	padding: 0.4em 1em;
	border-radius: var(--rep-radius-pill, 999px);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rep-transition-fast, 120ms ease), color var(--rep-transition-fast, 120ms ease), border-color var(--rep-transition-fast, 120ms ease);
}

.rep-data-report-page__topbar-copy:hover,
.rep-data-report-page__topbar-copy:focus-visible {
	background: var(--rep-data-brand);
	border-color: var(--rep-data-brand);
	color: var(--rep-data-on-brand);
}

/* -----------------------------------------------------------------
 * Hero
 * -------------------------------------------------------------- */

.rep-data-report-page__hero {
	position: relative;
	padding: clamp(72px, 14vw, 148px) clamp(20px, 6vw, 64px) clamp(56px, 10vw, 96px);
	text-align: center;
	background:
		linear-gradient(to right, color-mix(in srgb, var(--rep-data-text) 4%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--rep-data-text) 4%, transparent) 1px, transparent 1px),
		var(--rep-data-surface);
	background-size: 32px 32px, 32px 32px, auto;
	border-bottom: 1px solid var(--rep-data-border);
}

.rep-data-report-page__eyebrow {
	display: block;
	margin: 0 0 var(--rep-space-md);
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--rep-data-brand);
	font-family: var(--rep-data-report-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.rep-data-report-page__title {
	margin: 0 auto;
	max-width: 18ch;
	font-size: clamp(2rem, 5.5vw, var(--rep-text-hero, 3.4rem));
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--rep-data-text);
}

.rep-data-report-page__subtitle {
	margin: var(--rep-space-md) auto 0;
	max-width: 52ch;
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: var(--rep-data-muted);
}

.rep-data-report-page__hero .rep-data-report-page__meta {
	margin: var(--rep-space-lg) 0 0;
	font-family: var(--rep-data-report-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
}

.rep-data-report-page__scroll-cue {
	display: block;
	width: 10px;
	height: 10px;
	margin: var(--rep-space-xl) auto 0;
	border-right: 2px solid var(--rep-data-muted);
	border-bottom: 2px solid var(--rep-data-muted);
	transform: rotate(45deg);
	opacity: 0.6;
	animation: rep-data-report-bounce 1.8s ease-in-out infinite;
}

@keyframes rep-data-report-bounce {
	0%, 100% { transform: rotate(45deg) translate(0, 0); }
	50%      { transform: rotate(45deg) translate(4px, 4px); }
}

@media (prefers-reduced-motion: reduce) {
	.rep-data-report-page__scroll-cue {
		animation: none;
	}
}

/* -----------------------------------------------------------------
 * Body / sections
 * -------------------------------------------------------------- */

.rep-data-report-page__body {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 88px) clamp(20px, 6vw, 32px);
}

/* -----------------------------------------------------------------
 * Report tabs — General plus one per geography this report was scoped
 * to. Reuses the interactive report's own .rep-data-category-tabs
 * component for the underlying structure/color so the two never drift
 * apart visually, retuned here to this page's own mono-caps instrument-
 * panel register (see the file header) rather than that component's
 * plain-prose sizing.
 * -------------------------------------------------------------- */

.rep-data-report-page__tabs {
	margin: 0 0 clamp(32px, 6vw, 56px);
}

.rep-data-report-page__tabs .rep-data-category-tabs__tab {
	font-family: var(--rep-data-report-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.rep-data-report-page__section {
	margin-bottom: clamp(48px, 8vw, 88px);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--rep-transition-slow, 400ms ease), transform var(--rep-transition-slow, 400ms ease);
}

.rep-data-report-page__section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.rep-data-report-page__section > h2 {
	margin: 0 0 var(--rep-space-lg);
	font-size: 1.4rem;
	font-weight: var(--rep-weight-bold, 700);
	color: var(--rep-data-text);
}

/* Chart sections get the mono-caps "reading label" treatment instead of
   a heading-weight h2 — the chart itself is the content; the label only
   names what it's a chart of, the same register the KPI labels above
   and the ruler-tick divider below already speak. */
.rep-data-report-page__chart-section > h2 {
	margin: 0 0 var(--rep-space-md);
	font-family: var(--rep-data-report-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
}

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

/* One hairline-bordered instrument grid, not individually shadowed/
   floating cards — each cell is a measurement, not a product feature,
   so the grid itself (not per-cell color/elevation) is what carries the
   "this belongs together" signal. The four-color top-border rotation
   this replaced fought the "one accent, used once" restraint the rest
   of this register keeps to; the up/down delta badges already supply
   the report's color moments where they mean something (a real
   increase/decrease), so no cell needs a color of its own here. */
.rep-data-report-page__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	background: var(--rep-data-surface);
	border: 1px solid var(--rep-data-border);
	border-radius: var(--rep-data-radius);
	overflow: hidden;
}

.rep-data-report-page__kpi {
	padding: var(--rep-space-xl) var(--rep-space-md);
	border-right: 1px solid var(--rep-data-border);
	border-bottom: 1px solid var(--rep-data-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Centers the label+value+delta stack as a block, so a cell with no
	   delta (a metric with no YoY comparison, or no data at all) doesn't
	   read as top-heavy with dead space below it the way top-alignment
	   left it — every cell's content sits in the middle of its own
	   (grid-matched) row height regardless of how many lines it has. */
	justify-content: center;
	gap: 0.6em;
	text-align: center;
}

.rep-data-report-page__kpi-value {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	color: var(--rep-data-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Fixed two-line reservation, centered — a short one-line label
   ("Sold / Closed") and a long two-line one ("Sale-to-List Ratio") in
   neighboring cells otherwise pushed their own value down by a
   different amount, so values across the same row never lined up.
   Reserving the taller label's own height for every cell, whether or
   not its own text needs it, keeps every value starting from the same
   baseline across the whole grid — the row-to-row misalignment is what
   actually read as "unbalanced," not the labels' text itself. */
.rep-data-report-page__kpi-label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	font-family: var(--rep-data-report-mono);
	font-size: 11px;
	line-height: 1.3;
	color: var(--rep-data-muted);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	order: -1;
}

.rep-data-report-page__kpi-delta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 0.15em;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.6;
	padding: 0 8px;
	border-radius: var(--rep-radius-pill, 999px);
	width: fit-content;
}

.rep-data-report-page__kpi-delta.is-up {
	color: #1f7a4d;
	background: rgba(31, 122, 77, 0.12);
}

.rep-data-report-page__kpi-delta.is-down {
	color: #b03030;
	background: rgba(176, 48, 48, 0.12);
}

.rep-data-report-page__kpi-delta.is-flat {
	color: var(--rep-data-muted);
	background: rgba(0, 0, 0, 0.05);
}

.rep-data-report-page__kpis-note {
	margin: var(--rep-space-md) 0 0;
	font-size: var(--rep-data-meta-size);
	color: var(--rep-data-muted);
}

/* -----------------------------------------------------------------
 * Chart sections
 * -------------------------------------------------------------- */

.rep-data-report-page__chart-section {
	padding: var(--rep-space-lg) 0 0;
	border-top: 1px solid var(--rep-data-border);
}

.rep-data-report-page__chart-host {
	min-height: 320px;
}

/* -----------------------------------------------------------------
 * Narrative sections
 * -------------------------------------------------------------- */

.rep-data-report-page__narrative {
	display: flex;
	gap: var(--rep-space-lg);
}

/* A small bordered tag, not a bare colored numeral — the same "reference
   mark" a survey drawing pins to the margin of what it's annotating.
   Square (not pill), so it reads as an index tag rather than a badge. */
.rep-data-report-page__narrative-num {
	flex: none;
	width: 2.25em;
	height: 2.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rep-data-border);
	border-radius: calc(var(--rep-data-radius) - 4px);
	font-family: var(--rep-data-report-mono);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--rep-data-muted);
	font-variant-numeric: tabular-nums;
}

.rep-data-report-page__narrative-body h2 {
	margin: 0 0 var(--rep-space-sm);
}

.rep-data-report-page__narrative-body p {
	margin: 0 0 var(--rep-space-sm);
	color: var(--rep-data-text);
	line-height: var(--rep-leading-relaxed, 1.65);
}

.rep-data-report-page__narrative-body p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------
 * Footer: disclaimers, share bar, agent card
 * -------------------------------------------------------------- */

/* The report's closing mark: a scale-bar tick strip standing in for the
   plain hairline every other section divider already uses — the one
   place in the body this page repeats the hero grid's measurement
   motif, since this is the one moment the report is "closing the
   drawing" rather than presenting another reading. */
.rep-data-report-page__foot {
	border-top: 0;
	padding-top: clamp(32px, 6vw, 56px);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--rep-transition-slow, 400ms ease), transform var(--rep-transition-slow, 400ms ease);
	position: relative;
}

.rep-data-report-page__foot::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background-image:
		linear-gradient(to right, var(--rep-data-border) 1px, transparent 1px),
		linear-gradient(to right, var(--rep-data-border) 1px, transparent 1px);
	background-size: 40px 6px, 200px 10px;
	background-position: left top, left top;
	background-repeat: repeat-x, repeat-x;
	border-bottom: 1px solid var(--rep-data-border);
}

.rep-data-report-page__foot.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.rep-data-report-page__disclaimer {
	margin: 0 0 var(--rep-space-xs);
	font-family: var(--rep-data-report-mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--rep-data-muted);
	line-height: 1.6;
}

.rep-data-report-page__share {
	margin-top: var(--rep-space-xl);
	padding: var(--rep-space-lg);
	background: var(--rep-data-panel-bg);
	border-radius: var(--rep-data-radius);
	text-align: center;
}

.rep-data-report-page__share-label {
	display: block;
	margin-bottom: var(--rep-space-md);
	font-family: var(--rep-data-report-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rep-data-muted);
}

.rep-data-report-page__share-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rep-space-sm);
}

.rep-data-report-page__share-btn {
	appearance: none;
	border: 1px solid var(--rep-data-border);
	background: var(--rep-data-surface);
	color: var(--rep-data-text);
	font: inherit;
	font-size: var(--rep-data-control-size);
	font-weight: var(--rep-weight-semibold, 600);
	padding: 0.55em 1.2em;
	border-radius: var(--rep-radius-pill, 999px);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color var(--rep-transition-fast, 120ms ease), color var(--rep-transition-fast, 120ms ease), border-color var(--rep-transition-fast, 120ms ease), transform var(--rep-transition-fast, 120ms ease);
}

.rep-data-report-page__share-btn:hover,
.rep-data-report-page__share-btn:focus-visible {
	background: var(--rep-data-brand);
	border-color: var(--rep-data-brand);
	color: var(--rep-data-on-brand);
	transform: translateY(-2px);
}

.rep-data-report-page__agent {
	display: flex;
	align-items: center;
	gap: var(--rep-space-md);
	margin-top: var(--rep-space-xl);
	padding: var(--rep-space-md);
	border-left: 3px solid var(--rep-data-brand);
	background: var(--rep-data-surface);
	border-radius: var(--rep-data-radius);
}

/* Flex children size to their own content by default (no flex-grow set
   on any of them), so the agent's own text block never stretches to
   fill the row — this button's margin-left: auto is what claims that
   left-over space, pushing itself to the far right rather than sizing
   the text block wider than it needs to be. */
.rep-data-report-page__agent-btn {
	flex: none;
	margin-left: auto;
	display: inline-block;
	background: var(--rep-data-brand);
	font-weight: var(--rep-weight-semibold, 600);
	padding: 0.85em 2em;
	border-radius: var(--rep-radius-pill, 999px);
	white-space: nowrap;
	transition: transform var(--rep-transition-fast, 120ms ease), box-shadow var(--rep-transition-fast, 120ms ease);
}

/* Qualified with the parent class + tag so this outranks both
   ".rep-data-report-page__agent span, .rep-data-report-page__agent a"
   and ".rep-data-report-page__agent a" above (0,2,0 vs this rule's
   0,2,1) — those exist for the agent's own name/phone/mailto items and
   otherwise painted the button's text the same colour as its own
   background, shrank its font back to the meta-text size, and added a
   stray right margin meant for spacing those inline items apart. */
.rep-data-report-page__agent a.rep-data-report-page__agent-btn {
	color: var(--rep-data-on-brand);
	text-decoration: none;
	font-size: calc(var(--rep-data-control-size) * 1.15);
	margin-right: 0;
}

.rep-data-report-page__agent-btn:hover,
.rep-data-report-page__agent-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--rep-data-shadow);
}

.rep-data-report-page__agent-photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.rep-data-report-page__agent-photo--logo {
	border-radius: var(--rep-data-radius);
	object-fit: contain;
	background: var(--rep-data-page-bg);
	padding: 6px;
}

.rep-data-report-page__agent strong {
	display: block;
	color: var(--rep-data-text);
}

.rep-data-report-page__agent span,
.rep-data-report-page__agent a {
	display: inline-block;
	margin-right: var(--rep-space-sm);
	font-size: var(--rep-data-meta-size);
	color: var(--rep-data-muted);
}

.rep-data-report-page__agent a {
	color: var(--rep-data-brand);
	text-decoration: none;
}

/* Qualified with the parent class so this outranks the more specific
   ".rep-data-report-page__agent span" rule above (both match this
   element — it's a <span> too) — that rule's own display: inline-block
   was otherwise winning over this one's display: block despite coming
   later in the file, sizing this to its own text instead of the full
   row and making the divider/address look like a stray floating
   fragment rather than the report's own footer detail. */
.rep-data-report-page__agent .rep-data-report-page__brokerage {
	display: block;
	width: 100%;
	margin-top: var(--rep-space-xs);
	margin-right: 0;
	padding-top: var(--rep-space-xs);
	border-top: 1px solid var(--rep-data-border);
	line-height: 1.5;
}

.rep-data-report-page__more {
	margin-bottom: var(--rep-space-xl);
	text-align: center;
}

.rep-data-report-page__more-btn {
	display: inline-block;
	background: var(--rep-data-brand);
	color: var(--rep-data-on-brand);
	font-weight: var(--rep-weight-semibold, 600);
	font-size: calc(var(--rep-data-control-size) * 1.1);
	padding: 0.9em 2.4em;
	border-radius: var(--rep-radius-pill, 999px);
	text-decoration: none;
	transition: transform var(--rep-transition-fast, 120ms ease), box-shadow var(--rep-transition-fast, 120ms ease);
}

.rep-data-report-page__more-btn:hover,
.rep-data-report-page__more-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--rep-data-shadow);
}

/* -----------------------------------------------------------------
 * Reduced motion — the reveal/hover transitions above already key off
 * --rep-transition-* (already zeroed at the token layer under reduced
 * motion, see Core's tokens.css), so they need no extra rule here; only
 * the JS-driven initial hidden state (opacity/transform before
 * .is-visible is added) needs a floor so a visitor who never triggers
 * an IntersectionObserver callback for some reason still sees the
 * content, and print, where none of this chrome or motion is relevant.
 * -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rep-data-report-page__section,
	.rep-data-report-page__foot {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.rep-data-report-page__topbar,
	.rep-data-report-page__scroll-cue,
	.rep-data-report-page__share,
	.rep-data-report-page__more {
		display: none;
	}

	.rep-data-report-page__section,
	.rep-data-report-page__foot {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 640px) {
	.rep-data-report-page__narrative {
		flex-direction: column;
		gap: var(--rep-space-xs);
	}

	.rep-data-report-page__agent {
		flex-direction: column;
		text-align: center;
	}

	.rep-data-report-page__agent-btn {
		margin-left: 0;
		margin-top: var(--rep-space-xs);
	}
}