/* =====================================================================
   Paychecks Calculator Pro — Design System (Phase 9)
   ---------------------------------------------------------------------
   Direction: a payroll calculator is a ledger. The signature move is
   tabular monospace numerals for every dollar figure (aligned digits,
   printed-stub feel) paired with a real accounting color convention —
   ledger green for what you keep, brick-red for what's deducted —
   rather than a generic blue-SaaS palette. Background is a cool
   "ledger paper" off-white, not the cliché warm cream.
   ===================================================================== */

.pcp-calculator {
	/* --- Typography --- */
	--pcp-font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--pcp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* --- Light theme (default) --- */
	--pcp-color-bg: #f6f7f5;
	--pcp-color-surface: #ffffff;
	--pcp-color-surface-alt: #eff3f0;
	--pcp-color-border: #dde3de;
	--pcp-color-text: #12181b;
	--pcp-color-muted: #5b6b62;
	--pcp-color-primary: #1f6f54;
	--pcp-color-primary-strong: #175a44;
	--pcp-color-primary-tint: #e4f0ea;
	--pcp-color-accent-gold: #c98a2c;
	--pcp-color-negative: #b3452f;
	--pcp-color-positive: #1f6f54;
	--pcp-shadow-sm: 0 1px 2px rgba( 18, 24, 27, 0.06 );
	--pcp-shadow-md: 0 6px 20px rgba( 31, 111, 84, 0.10 );

	/* --- Chart-specific hues (8 distinct categories, WCAG-checked against both surfaces) --- */
	--pcp-chart-federal: #1c4e6b;
	--pcp-chart-state: #3f7d9e;
	--pcp-chart-local: #7a5ea8;
	--pcp-chart-ss: #c98a2c;
	--pcp-chart-medicare: #d9773f;
	--pcp-chart-sdi: #b3452f;
	--pcp-chart-benefits: #93a79c;
	--pcp-chart-net: #1f6f54;

	/* --- Spacing / radius scale --- */
	--pcp-space-1: 4px;
	--pcp-space-2: 8px;
	--pcp-space-3: 12px;
	--pcp-space-4: 16px;
	--pcp-space-5: 24px;
	--pcp-space-6: 32px;
	--pcp-radius-lg: 16px;
	--pcp-radius-md: 10px;
	--pcp-radius-sm: 6px;

	/* legacy alias kept so earlier-phase selectors referencing --pcp-radius still resolve */
	--pcp-radius: var( --pcp-radius-lg );

	display: grid;
	grid-template-columns: 1fr;
	gap: var( --pcp-space-5 );
	color: var( --pcp-color-text );
	background: var( --pcp-color-bg );
	font-family: var( --pcp-font-ui );
	font-size: 15px;
	line-height: 1.5;
	padding: var( --pcp-space-5 );
	border-radius: var( --pcp-radius-lg );
	max-width: 1600px;
	margin-inline: auto;
	box-sizing: border-box;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* --- Dark theme --- */
.pcp-calculator[data-pcp-theme="dark"] {
	--pcp-color-bg: #0f1613;
	--pcp-color-surface: #16201c;
	--pcp-color-surface-alt: #1c2622;
	--pcp-color-border: #29352f;
	--pcp-color-text: #e8ece9;
	--pcp-color-muted: #93a79c;
	--pcp-color-primary: #4caf86;
	--pcp-color-primary-strong: #63c79c;
	--pcp-color-primary-tint: #1a2b23;
	--pcp-color-accent-gold: #e0a94a;
	--pcp-color-negative: #e07856;
	--pcp-color-positive: #4caf86;
	--pcp-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.3 );
	--pcp-shadow-md: 0 8px 24px rgba( 0, 0, 0, 0.35 );

	--pcp-chart-federal: #4a90c4;
	--pcp-chart-state: #6fb4d6;
	--pcp-chart-local: #ab94d9;
	--pcp-chart-ss: #e0a94a;
	--pcp-chart-medicare: #e08f4a;
	--pcp-chart-sdi: #e07856;
	--pcp-chart-benefits: #6c7d74;
	--pcp-chart-net: #4caf86;
}

/* The custom select-dropdown arrow below is a data-URI SVG with its
   color baked into the string — data URIs can't reference CSS custom
   properties, so it can't automatically pick up --pcp-color-muted's
   dark-theme value the way real CSS properties do. Without this
   override the arrow would stay the light-theme gray (#5b6b62)
   against a dark background: low contrast, hard to see. This swaps
   in the dark-theme muted color (#93a79c) explicitly. */
.pcp-calculator[data-pcp-theme="dark"] .pcp-field select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2393a79c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

/* Two-column horizontal layout kicks in almost immediately above
   phone width — most WordPress theme content columns (even "narrow"
   ones) are comfortably above 560px, so this triggers far more
   reliably than waiting for a wide viewport. */
@media ( min-width: 560px ) {
	.pcp-calculator {
		/* minmax(0, 1fr), not plain 1fr: a bare `1fr` track has an
		   implicit minimum width equal to its CONTENT's size, not 0 —
		   so if a column's content (long labels, wide inputs) can't
		   shrink enough, the track expands past its fair share and
		   spills outside its own column into whatever sits next to it.
		   minmax(0, 1fr) explicitly allows the track to shrink below
		   its content's natural size instead, which is what actually
		   keeps both columns contained side by side. */
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
	.pcp-calculator__charts,
	.pcp-calculator__insights,
	.pcp-lead-capture-card {
		grid-column: 1 / -1;
	}
}

/* Once there's genuinely more room, give the input column a bit more
   relative space than the results column. */
@media ( min-width: 900px ) {
	.pcp-calculator {
		grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr );
	}
}

/* --- Reduced motion: respected globally --- */
@media ( prefers-reduced-motion: reduce ) {
	.pcp-calculator,
	.pcp-calculator * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Accessible keyboard focus, everywhere --- */
.pcp-calculator a:focus-visible,
.pcp-calculator button:focus-visible,
.pcp-calculator input:focus-visible,
.pcp-calculator select:focus-visible,
.pcp-calculator summary:focus-visible,
.pcp-calculator [tabindex]:focus-visible {
	outline: 2px solid var( --pcp-color-primary );
	outline-offset: 2px;
	border-radius: var( --pcp-radius-sm );
}

/* --- Theme toggle --- */
.pcp-theme-toggle {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var( --pcp-space-2 );
}

.pcp-theme-toggle button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --pcp-color-surface );
	border: 1px solid var( --pcp-color-border );
	color: var( --pcp-color-text );
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12.5px;
	font-family: var( --pcp-font-ui );
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pcp-theme-toggle button:hover {
	box-shadow: var( --pcp-shadow-sm );
}

.pcp-theme-toggle button:active {
	transform: scale( 0.97 );
}

/* --- Money: the signature typographic treatment --- */
.pcp-money,
.pcp-result-row strong,
.pcp-donut-center-value,
.pcp-timeline-tooltip strong,
.pcp-compare-values,
.pcp-progress-label strong,
.pcp-donut-legend strong {
	font-family: var( --pcp-font-mono );
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* =====================================================================
   Inputs
   ===================================================================== */

.pcp-calculator__inputs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --pcp-space-4 );
	align-items: start;
	container-type: inline-size;
	container-name: pcp-inputs;
}

/* Pair fieldsets up side by side (Pay Type + Location, Hourly/Salary +
   Bonus, and — the pairing this was specifically built to guarantee —
   Filing Details + Deductions & Benefits) once the inputs column
   itself has enough room. Mode-toggle sections that are display:none
   (Hourly vs Salary) are simply skipped by grid auto-placement, so
   pairing stays correct in both modes.

   Two mechanisms, either one is enough on its own:

   1) A container query on the inputs column's OWN width — the
      correct, primary tool here, since the column's actual width
      depends on the outer inputs/results split (½ the calculator
      below 900px viewport, ~55% above it), not the viewport directly.
   2) A viewport media-query fallback, only for browsers without
      container-query support. This must stay set well ABOVE the
      outer layout's own breakpoints (560px / 900px) — a fallback
      that fires based on viewport alone, blind to how much of that
      viewport the outer split already gave to the results column,
      is exactly what caused fieldsets to overlap the results panel
      on tablet-width screens (e.g. ~800px viewport, where the outer
      50/50 split leaves the inputs column only ~360px wide — too
      narrow for a real 2-column fieldset layout, but wide enough to
      wrongly trigger a low fallback threshold).

   Both mechanisms use minmax(0, 1fr) rather than a bare 1fr: a bare
   `1fr` track's implicit minimum width is its CONTENT's size, not 0,
   so a fieldset whose content can't shrink enough would expand past
   its column and spill into the results panel next to it — which is
   the actual overlap bug, independent of which breakpoint fired. */
@container pcp-inputs ( min-width: 420px ) {
	.pcp-calculator__inputs {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
	/* Explicit guarantee for this specific pair, on top of natural
	   auto-flow already landing them together (they're always the
	   last two visible fieldsets in both Salary and Hourly mode). */
	[data-pcp-section="filing"] {
		grid-column: 1;
	}
	[data-pcp-section="deductions"] {
		grid-column: 2;
	}
}

@media ( min-width: 1180px ) {
	.pcp-calculator__inputs {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
	[data-pcp-section="filing"] {
		grid-column: 1;
	}
	[data-pcp-section="deductions"] {
		grid-column: 2;
	}
}

.pcp-section {
	background: var( --pcp-color-surface );
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-lg );
	padding: var( --pcp-space-4 ) var( --pcp-space-4 );
	display: grid;
	gap: var( --pcp-space-3 );
	box-shadow: var( --pcp-shadow-sm );
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pcp-section:focus-within {
	border-color: var( --pcp-color-primary );
	box-shadow: var( --pcp-shadow-md );
}

.pcp-section legend {
	font-weight: 700;
	padding: 0 4px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --pcp-color-muted );
}

.pcp-toggle {
	display: flex;
	gap: var( --pcp-space-2 );
}

.pcp-toggle label {
	flex: 1;
	text-align: center;
	padding: var( --pcp-space-2 );
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-md );
	cursor: pointer;
	background: var( --pcp-color-surface-alt );
	font-weight: 600;
	font-size: 13.5px;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.pcp-toggle label:has( input:checked ) {
	background: var( --pcp-color-primary-tint );
	border-color: var( --pcp-color-primary );
	color: var( --pcp-color-primary-strong );
}

.pcp-toggle label:active {
	transform: scale( 0.98 );
}

.pcp-field {
	display: grid;
	gap: 6px;
	font-size: 13.5px;
}

.pcp-field span {
	color: var( --pcp-color-muted );
	font-weight: 600;
	font-size: 12.5px;
}

.pcp-field input[type="number"],
.pcp-field input[type="text"],
.pcp-field input[type="email"],
.pcp-field input[type="date"],
.pcp-field select {
	padding: 10px 12px;
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-md );
	font-size: 14px;
	font-family: var( --pcp-font-mono );
	font-variant-numeric: tabular-nums;
	background: var( --pcp-color-surface );
	color: var( --pcp-color-text );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pcp-field select {
	font-family: var( --pcp-font-ui );

	/* Custom dropdown arrow, always visible regardless of browser/OS:
	   native select arrows render very differently across Chrome,
	   Firefox, Safari, and Windows vs. macOS — some are barely visible
	   against a custom-styled input. appearance:none removes the
	   native one so this SVG chevron (matching --pcp-color-muted) is
	   what actually shows, everywhere, all the time. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b6b62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.pcp-field input[type="number"] {
	/* Native number-input spinners are unreliable across browsers —
	   Safari doesn't render them at all, Chrome/Firefox only show
	   them clearly on hover/focus in some OS themes. Hidden here in
	   favor of the always-visible custom stepper buttons added by
	   number-steppers.js (see .pcp-number-wrap below), which work
	   identically everywhere and never depend on hover. */
	-moz-appearance: textfield;
}

.pcp-field input[type="number"]::-webkit-inner-spin-button,
.pcp-field input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Custom number stepper (built by number-steppers.js) ---
   Always visible, not hover-dependent — a real functioning up/down
   control rather than a decorative icon, so it stays honest about
   what it does. */
.pcp-number-wrap {
	position: relative;
	display: block;
}

.pcp-number-wrap input[type="number"] {
	width: 100%;
	padding-right: 34px;
	box-sizing: border-box;
}

.pcp-number-stepper {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	display: flex;
	flex-direction: column;
	width: 26px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var( --pcp-color-border );
}

.pcp-number-step {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --pcp-color-surface-alt );
	border: none;
	color: var( --pcp-color-muted );
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.pcp-number-step svg {
	width: 9px;
	height: 9px;
	pointer-events: none;
}

.pcp-number-step--up {
	border-bottom: 1px solid var( --pcp-color-border );
}

.pcp-number-step:hover {
	background: var( --pcp-color-primary-tint );
	color: var( --pcp-color-primary-strong );
}

.pcp-number-step:active {
	background: var( --pcp-color-primary );
	color: #fff;
}

.pcp-number-step:focus-visible {
	outline: 2px solid var( --pcp-color-primary );
	outline-offset: -2px;
}

.pcp-field input:focus,
.pcp-field select:focus {
	border-color: var( --pcp-color-primary );
	box-shadow: 0 0 0 3px var( --pcp-color-primary-tint );
	outline: none;
}

.pcp-checkbox {
	flex-direction: row;
	align-items: center;
	display: flex;
	gap: var( --pcp-space-2 );
}

/* Custom range slider — explicit track + thumb for both engines rather
   than relying on `accent-color`, which only works if the browser's
   native track rendering is still active. Many WordPress themes reset
   input[type="range"] styling (-webkit-appearance: none) globally to
   normalize form controls, which strips the native track and leaves
   only the thumb floating with nothing visible under it. Setting
   appearance: none ourselves and then explicitly styling both the
   track and thumb means this renders correctly regardless of what a
   theme's own reset does. */
.pcp-slider {
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.pcp-field input.pcp-slider:focus {
	outline: none;
	box-shadow: none;
	border-color: transparent;
}

.pcp-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var( --pcp-color-border );
}

.pcp-slider::-moz-range-track {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var( --pcp-color-border );
}

.pcp-slider::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var( --pcp-color-primary );
}

.pcp-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px; /* centers the 18px thumb on the 6px track: (18-6)/2 */
	border-radius: 50%;
	background: var( --pcp-color-primary );
	border: 2px solid var( --pcp-color-surface );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	transition: transform 0.1s ease;
}

.pcp-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --pcp-color-primary );
	border: 2px solid var( --pcp-color-surface );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	transition: transform 0.1s ease;
}

.pcp-slider:active::-webkit-slider-thumb,
.pcp-slider:active::-moz-range-thumb {
	transform: scale( 1.1 );
}

.pcp-slider:focus-visible::-webkit-slider-thumb,
.pcp-slider:focus-visible::-moz-range-thumb {
	outline: 2px solid var( --pcp-color-primary );
	outline-offset: 2px;
}

.pcp-hint {
	color: var( --pcp-color-primary );
	font-size: 12px;
}

.pcp-w4-details summary {
	cursor: pointer;
	font-weight: 600;
	margin-bottom: var( --pcp-space-2 );
	font-size: 13.5px;
}

/* =====================================================================
   Results panel
   ===================================================================== */

.pcp-calculator__results {
	background: var( --pcp-color-surface );
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-lg );
	padding: var( --pcp-space-5 );
	box-shadow: var( --pcp-shadow-md );
	align-self: start;
	min-height: 120px; /* prevents layout shift while the first AJAX response loads */
}

.pcp-result-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var( --pcp-space-2 ) 0;
	border-bottom: 1px solid var( --pcp-color-border );
	font-size: 13.5px;
	animation: pcp-row-in 0.25s ease both;
}

@keyframes pcp-row-in {
	from { opacity: 0; transform: translateY( 2px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.pcp-result-row--emphasis {
	font-size: 18px;
	font-weight: 700;
	color: var( --pcp-color-positive );
	border-bottom: 2px solid var( --pcp-color-positive );
	padding: var( --pcp-space-3 ) 0;
}

.pcp-calculator__error {
	color: var( --pcp-color-negative );
	font-size: 13.5px;
}

/* =====================================================================
   Phase 4 — Charts
   ===================================================================== */

.pcp-calculator__charts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --pcp-space-4 );
}

@media ( min-width: 720px ) {
	.pcp-calculator__charts {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.pcp-chart-card {
	background: var( --pcp-color-surface );
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-lg );
	padding: var( --pcp-space-4 );
	box-shadow: var( --pcp-shadow-sm );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pcp-chart-card:hover {
	box-shadow: var( --pcp-shadow-md );
}

.pcp-chart-card h3 {
	margin: 0 0 var( --pcp-space-3 );
	font-size: 14.5px;
	font-weight: 700;
}

.pcp-chart-donut-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pcp-space-5 );
	align-items: center;
}

.pcp-donut-svg {
	width: 200px;
	height: 200px;
	flex-shrink: 0;
}

.pcp-donut-arc {
	transition: stroke-width 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
}

.pcp-donut-arc--active {
	stroke-width: 34;
}

.pcp-donut-center-label {
	font-size: 10px;
	fill: var( --pcp-color-muted );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: var( --pcp-font-ui );
}

.pcp-donut-center-value {
	font-size: 16px;
	font-weight: 700;
	fill: var( --pcp-color-text );
}

.pcp-donut-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --pcp-space-2 );
	font-size: 13px;
	flex: 1;
	min-width: 160px;
}

.pcp-legend-item {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var( --pcp-space-2 );
	border-radius: var( --pcp-radius-sm );
	padding: 3px 4px;
	transition: background-color 0.15s ease;
}

.pcp-legend-item:hover {
	background: var( --pcp-color-surface-alt );
}

.pcp-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}

.pcp-progress-row {
	margin-bottom: var( --pcp-space-3 );
}

.pcp-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 4px;
}

.pcp-progress-track {
	background: var( --pcp-color-surface-alt );
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.pcp-progress-fill {
	height: 100%;
	border-radius: 999px;
	transition: width 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pcp-timeline-chart {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 120px;
}

.pcp-timeline-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	cursor: pointer;
}

.pcp-timeline-bar {
	width: 100%;
	background: var( --pcp-color-primary );
	border-radius: var( --pcp-radius-sm ) var( --pcp-radius-sm ) 0 0;
	transition: height 0.4s ease, background-color 0.2s ease, transform 0.15s ease;
}

.pcp-timeline-col:hover .pcp-timeline-bar {
	background: var( --pcp-color-accent-gold );
	transform: scaleY( 1.02 );
	transform-origin: bottom;
}

.pcp-timeline-month {
	font-size: 10px;
	color: var( --pcp-color-muted );
	margin-top: 4px;
}

.pcp-timeline-tooltip {
	margin-top: var( --pcp-space-3 );
	font-size: 13px;
	color: var( --pcp-color-muted );
	min-height: 18px;
}

.pcp-compare-row {
	margin-bottom: var( --pcp-space-3 );
}

.pcp-compare-label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.pcp-compare-track {
	background: var( --pcp-color-surface-alt );
	border-radius: var( --pcp-radius-sm );
	height: 14px;
	position: relative;
	overflow: hidden;
}

.pcp-compare-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: var( --pcp-radius-sm );
	transition: width 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pcp-compare-bar--gross {
	background: var( --pcp-color-border );
}

.pcp-compare-bar--net {
	background: var( --pcp-color-primary );
	height: 60%;
	top: 20%;
}

.pcp-compare-values {
	font-size: 12px;
	color: var( --pcp-color-muted );
	margin-top: 4px;
}

/* =====================================================================
   Phase 5 — Insights & summary
   ===================================================================== */

.pcp-calculator__insights {
	background: var( --pcp-color-surface-alt );
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-lg );
	padding: var( --pcp-space-4 ) var( --pcp-space-5 );
}

.pcp-summary {
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0 0 var( --pcp-space-3 );
	color: var( --pcp-color-text );
}

.pcp-insights-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --pcp-space-2 );
}

.pcp-insights-list li {
	font-size: 13.5px;
	line-height: 1.5;
	padding: 10px 12px;
	background: var( --pcp-color-surface );
	border: 1px solid var( --pcp-color-border );
	border-left: 3px solid var( --pcp-color-accent-gold );
	border-radius: var( --pcp-radius-sm );
}

/* =====================================================================
   Phase 6 — Lead capture
   ===================================================================== */

.pcp-lead-capture-card {
	background: var( --pcp-color-surface );
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-lg );
	padding: var( --pcp-space-6 ) var( --pcp-space-5 );
	box-shadow: var( --pcp-shadow-sm );
	text-align: center;
}

.pcp-lead-capture-card h3 {
	margin: 0 0 4px;
	font-size: 18px;
}

.pcp-lead-capture-sub {
	color: var( --pcp-color-muted );
	font-size: 13.5px;
	margin: 0 0 var( --pcp-space-5 );
}

#pcp-lead-capture-form {
	display: grid;
	gap: var( --pcp-space-4 );
	max-width: 640px;
	width: 100%;
	margin-inline: auto;
	text-align: left; /* labels/inputs read left-to-right normally; only the card and form block itself are centered */
}

.pcp-field input#pcp-lead-first-name,
.pcp-field input#pcp-lead-email {
	width: 100%;
	padding: 14px 16px;
	font-size: 15px;
	box-sizing: border-box;
}

.pcp-lead-consent {
	flex-direction: row;
	align-items: flex-start;
	display: flex;
	gap: var( --pcp-space-2 );
	font-size: 12.5px;
	color: var( --pcp-color-muted );
}

.pcp-lead-consent input {
	margin-top: 3px;
}

.pcp-button-primary {
	background: var( --pcp-color-primary );
	color: #fff;
	border: none;
	border-radius: var( --pcp-radius-md );
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 700;
	font-family: var( --pcp-font-ui );
	cursor: pointer;
	width: 100%;
	justify-self: stretch;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.pcp-button-primary:hover {
	background: var( --pcp-color-primary-strong );
	box-shadow: var( --pcp-shadow-md );
}

.pcp-button-primary:active {
	transform: scale( 0.97 );
}

.pcp-button-primary:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

#pcp-lead-status {
	font-size: 13px;
	margin: var( --pcp-space-2 ) 0 0;
	min-height: 16px;
	text-align: center;
}

/* =====================================================================
   Phase 7 — SEO markup (breadcrumbs, FAQ, related links)
   ===================================================================== */

.pcp-breadcrumbs {
	margin: 0 0 var( --pcp-space-4 );
}

.pcp-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var( --pcp-color-muted );
}

.pcp-breadcrumbs li:not(:last-child)::after {
	content: '›';
	margin-left: 6px;
	color: var( --pcp-color-border );
}

.pcp-breadcrumbs a {
	color: var( --pcp-color-primary );
	text-decoration: none;
}

.pcp-breadcrumbs a:hover {
	text-decoration: underline;
}

.pcp-breadcrumbs li[aria-current="page"] {
	color: var( --pcp-color-text );
	font-weight: 600;
}

.pcp-faq {
	margin-top: var( --pcp-space-6 );
	border-top: 1px solid var( --pcp-color-border );
	padding-top: var( --pcp-space-5 );
}

.pcp-faq h2 {
	font-size: 19px;
	margin: 0 0 var( --pcp-space-4 );
}

.pcp-faq-item {
	border: 1px solid var( --pcp-color-border );
	border-radius: var( --pcp-radius-md );
	padding: var( --pcp-space-3 ) var( --pcp-space-4 );
	margin-bottom: var( --pcp-space-2 );
	background: var( --pcp-color-surface );
	transition: border-color 0.15s ease;
}

.pcp-faq-item:hover {
	border-color: var( --pcp-color-primary );
}

.pcp-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
}

.pcp-faq-item p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --pcp-color-muted );
	margin: 10px 0 0;
}