/**
 * ProDev Quiz — public stylesheet.
 *
 * Direction: refined editorial minimalism. Warm paper background,
 * confident serif display + humanist sans body, generous whitespace,
 * single deep-forest accent. Scoped under .pdq-root so it never bleeds
 * into the host theme.
 *
 * All colors / spacing exposed as CSS variables under .pdq-root for
 * easy site-level overrides without touching this file.
 */

.pdq-root {
	/* === Tokens === */
	/* Dark theme: near-black base, off-white ink, electric lime accent.
	 * Modern, gender-neutral, brave. The accent pops hard against bg so
	 * CTAs are unmissable. */
	--pdq-color-bg:           #0A0A0F;   /* page background */
	--pdq-color-bg-sunken:    #06060A;   /* deeper recess */
	--pdq-color-surface:      #14141A;   /* cards, inputs */
	--pdq-color-surface-2:    #1C1C24;   /* elevated cards, hover bg */
	--pdq-color-ink:          #F5F5F7;   /* primary text */
	--pdq-color-ink-soft:     #C5C5CC;   /* secondary text */
	--pdq-color-ink-mute:     #8A8A95;   /* tertiary, helpers, placeholders */
	--pdq-color-line:         #25252F;   /* default border */
	--pdq-color-line-soft:    #1A1A22;   /* faint separator */
	--pdq-color-line-strong:  #3A3A48;   /* focused/hovered border */
	--pdq-color-accent:       #C8FF5C;   /* electric lime — the brand pop */
	--pdq-color-accent-strong:#D6FF7A;   /* hover state */
	--pdq-color-accent-soft:  #2A331A;   /* tinted bg behind lime */
	--pdq-color-accent-fg:    #0A0A0F;   /* text on accent backgrounds */
	--pdq-color-warn:         #FF6B5B;   /* coral */
	--pdq-color-warn-soft:    #2A1815;   /* dark coral wash */
	--pdq-color-success:      #5BFF9F;   /* mint-green */

	/* Modern geometric sans + monospaced accent. No serif. */
	--pdq-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--pdq-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--pdq-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

	/* Sharper corners — modern, less "soft". */
	--pdq-radius-sm: 4px;
	--pdq-radius-md: 8px;
	--pdq-radius-lg: 12px;

	/* Glow shadows + accent focus ring. */
	--pdq-shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
	--pdq-shadow-glow:  0 0 0 1px var(--pdq-color-line-strong), 0 16px 48px rgba(0, 0, 0, 0.5);
	--pdq-shadow-focus: 0 0 0 3px rgba(200, 255, 92, 0.25);
	--pdq-shadow-accent:0 0 24px rgba(200, 255, 92, 0.18);

	/* Wider main column. Sidebar slightly wider too. */
	--pdq-sidebar-w: 320px;
	--pdq-main-max:  1280px;
	--pdq-gutter:    64px;

	--pdq-transition: 240ms cubic-bezier(0.2, 0, 0, 1);

	/* === Root container === */
	position: relative;
	font-family: var(--pdq-font-body);
	font-feature-settings: 'ss01', 'cv11';
	color: var(--pdq-color-ink);
	background: var(--pdq-color-bg);
	min-height: 100vh;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pdq-root *,
.pdq-root *::before,
.pdq-root *::after {
	box-sizing: border-box;
}

/* ====================================================================
 * Loading state — visible until JS hydrates, then hidden
 * ================================================================== */

.pdq-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pdq-color-bg);
	z-index: 10;
}

.pdq-loading__inner {
	display: flex;
	gap: 6px;
}

.pdq-loading__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--pdq-color-ink-mute);
	animation: pdq-pulse 1.4s ease-in-out infinite;
}
.pdq-loading__dot:nth-child(2) { animation-delay: 0.16s; }
.pdq-loading__dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes pdq-pulse {
	0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
	40% { transform: scale(1); opacity: 1; }
}

.pdq-shell[data-pdq-ready="1"] ~ .pdq-loading,
.pdq-shell:not([hidden]) ~ .pdq-loading {
	display: none;
}

/* ====================================================================
 * Shell layout
 * ================================================================== */

.pdq-shell {
	display: grid;
	grid-template-columns: var(--pdq-sidebar-w) 1fr;
	min-height: 100vh;
}

.pdq-noscript {
	max-width: 560px;
	margin: 80px auto;
	padding: 32px;
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	background: var(--pdq-color-surface);
	text-align: center;
}

.pdq-noscript h2 {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 24px;
	margin: 0 0 12px;
}

/* ====================================================================
 * Sidebar
 * ================================================================== */

.pdq-sidebar {
	background: var(--pdq-color-bg-sunken);
	border-right: 1px solid var(--pdq-color-line);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	position: sticky;
	top: 0;
	height: 100vh;
}

.pdq-sidebar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.pdq-brand {
	font-family: var(--pdq-font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--pdq-color-ink);
}

.pdq-stage-progress {
	font-family: var(--pdq-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--pdq-color-ink-mute);
	display: flex;
	gap: 4px;
	align-items: baseline;
}

.pdq-stage-progress__num {
	color: var(--pdq-color-accent);
	font-weight: 600;
}

/* Stage list — vertical timeline */

.pdq-stage-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdq-stage-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--pdq-color-ink-mute);
	cursor: pointer;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	transition: color 180ms ease;
}

.pdq-stage-list__item:hover:not(:disabled) {
	color: var(--pdq-color-ink-soft);
}

.pdq-stage-list__item:disabled {
	cursor: default;
	opacity: 0.6;
}

.pdq-stage-list__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--pdq-color-line);
	flex-shrink: 0;
	transition: all 220ms ease;
}

.pdq-stage-list__item--done .pdq-stage-list__dot {
	background: var(--pdq-color-accent);
	box-shadow: 0 0 0 4px var(--pdq-color-accent-soft);
}

.pdq-stage-list__item--current {
	color: var(--pdq-color-ink);
	font-weight: 600;
}

.pdq-stage-list__item--current .pdq-stage-list__dot {
	background: var(--pdq-color-accent);
	box-shadow: 0 0 0 4px var(--pdq-color-accent-soft);
	transform: scale(1.25);
}

.pdq-stage-list__num {
	font-family: var(--pdq-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--pdq-color-ink-mute);
	margin-right: 8px;
	min-width: 22px;
}

.pdq-sidebar__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Progress bar */

.pdq-progress__label {
	font-size: 12px;
	color: var(--pdq-color-ink-mute);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pdq-progress__bar {
	height: 4px;
	background: var(--pdq-color-line-soft);
	border-radius: 999px;
	overflow: hidden;
}

.pdq-progress__fill {
	height: 100%;
	background: var(--pdq-color-accent);
	transition: width var(--pdq-transition);
	border-radius: 999px;
}

.pdq-sync-status {
	font-size: 11px;
	color: var(--pdq-color-ink-mute);
	min-height: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pdq-sync-status--saved { color: var(--pdq-color-success); }
.pdq-sync-status--error { color: var(--pdq-color-warn); }

.pdq-sync-status::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.pdq-sync-status:empty::before { display: none; }

/* ====================================================================
 * Mobile sidebar toggle (hidden on desktop)
 * ================================================================== */

.pdq-mobile-toggle {
	display: none;
}

/* ====================================================================
 * Main column
 * ================================================================== */

.pdq-main {
	padding: 64px var(--pdq-gutter);
	max-width: calc(var(--pdq-main-max) + var(--pdq-gutter) * 2);
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pdq-stage {
	flex: 1;
	animation: pdq-stage-in 380ms cubic-bezier(0.2, 0.7, 0.1, 1);
}

@keyframes pdq-stage-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Stage header */

.pdq-stage__eyebrow {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
}

.pdq-stage__num {
	font-family: var(--pdq-font-display);
	font-weight: 700;
	font-size: 80px;
	line-height: 0.9;
	color: var(--pdq-color-accent);
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.pdq-stage__label {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pdq-color-ink-mute);
}

.pdq-stage__title {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--pdq-color-ink);
	margin: 0 0 12px;
}

.pdq-stage__subtitle {
	font-size: 17px;
	color: var(--pdq-color-ink-soft);
	margin: 0 0 48px;
	max-width: 560px;
}

/* ====================================================================
 * Question block
 * ================================================================== */

.pdq-question {
	margin-bottom: 48px;
	scroll-margin-top: 32px;
}

.pdq-question + .pdq-question {
	margin-top: 56px;
}

.pdq-question__head {
	margin-bottom: 16px;
}

.pdq-question__label {
	display: block;
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--pdq-color-ink);
	margin-bottom: 6px;
	letter-spacing: -0.005em;
}

.pdq-question__help {
	font-size: 14px;
	color: var(--pdq-color-ink-mute);
	max-width: 540px;
	line-height: 1.55;
}

.pdq-question__optional {
	font-size: 11px;
	color: var(--pdq-color-ink-mute);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-left: 8px;
	vertical-align: middle;
}

.pdq-question__error {
	margin-top: 8px;
	font-size: 13px;
	color: var(--pdq-color-warn);
	display: none;
}

.pdq-question--error .pdq-question__error {
	display: block;
}

.pdq-question--error .pdq-input,
.pdq-question--error .pdq-textarea {
	border-color: var(--pdq-color-warn);
}

/* ====================================================================
 * Inputs (text, email, url)
 * ================================================================== */

.pdq-input,
.pdq-textarea {
	width: 100%;
	font-family: var(--pdq-font-body);
	font-size: 16px;
	color: var(--pdq-color-ink);
	background: var(--pdq-color-surface);
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-sm);
	padding: 14px 16px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	line-height: 1.4;
}

.pdq-input:focus,
.pdq-textarea:focus {
	outline: none;
	border-color: var(--pdq-color-accent);
	box-shadow: var(--pdq-shadow-focus);
}

.pdq-input::placeholder,
.pdq-textarea::placeholder {
	color: var(--pdq-color-ink-mute);
}

.pdq-textarea {
	min-height: 120px;
	resize: vertical;
	font-family: var(--pdq-font-body);
}

.pdq-textarea--lg { min-height: 160px; }

/* ====================================================================
 * Selectables — radio cards & checkbox pills
 * ================================================================== */

.pdq-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pdq-options--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.pdq-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid var(--pdq-color-line);
	background: var(--pdq-color-surface);
	border-radius: var(--pdq-radius-sm);
	cursor: pointer;
	transition: all 180ms ease;
	font-size: 15px;
	color: var(--pdq-color-ink);
	user-select: none;
}

.pdq-option:hover {
	border-color: var(--pdq-color-ink-mute);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pdq-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pdq-option__indicator {
	width: 18px; height: 18px;
	border: 1.5px solid var(--pdq-color-line);
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
	transition: all 180ms ease;
	position: relative;
}

.pdq-option--multi .pdq-option__indicator {
	border-radius: 4px;
}

.pdq-option__indicator::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--pdq-color-accent);
	transform: scale(0);
	transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pdq-option--multi .pdq-option__indicator::after {
	inset: 2px;
	border-radius: 2px;
	background: none;
	border: solid var(--pdq-color-surface);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	width: 5px;
	height: 9px;
	left: 5.5px;
	top: 2px;
}

.pdq-option--selected {
	border-color: var(--pdq-color-accent);
	background: var(--pdq-color-accent-soft);
}

.pdq-option--selected .pdq-option__indicator {
	border-color: var(--pdq-color-accent);
}

.pdq-option--multi.pdq-option--selected .pdq-option__indicator {
	background: var(--pdq-color-accent);
}

.pdq-option--selected .pdq-option__indicator::after {
	transform: scale(1);
}

.pdq-option--multi.pdq-option--selected .pdq-option__indicator::after {
	transform: rotate(45deg) scale(1);
}

.pdq-option__body {
	flex: 1;
}

.pdq-option__title {
	font-weight: 500;
	line-height: 1.4;
}

/* Icon-card variant for Stage 1 (site_type) */

.pdq-options--icon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.pdq-option--icon-card {
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 24px;
	min-height: 144px;
}

.pdq-option--icon-card .pdq-option__indicator {
	display: none;
}

.pdq-option--icon-card .pdq-option__icon {
	font-size: 32px;
	margin-bottom: 16px;
	line-height: 1;
}

.pdq-option--icon-card .pdq-option__title {
	font-size: 16px;
	font-weight: 500;
}

.pdq-option--icon-card.pdq-option--selected {
	border-color: var(--pdq-color-accent);
	border-width: 1px;
	box-shadow: inset 0 0 0 1px var(--pdq-color-accent), var(--pdq-shadow-soft);
}

/* Option-followups (when an option has nested fields) */

.pdq-option__followups {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--pdq-color-line);
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

/* Allows-text input (the "Kita" text input on multi-select) */

.pdq-option__text-input {
	margin-top: 10px;
	width: 100%;
}

/* ====================================================================
 * Structured & repeater
 * ================================================================== */

.pdq-fieldset {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--pdq-color-surface);
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
}

.pdq-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pdq-field__label {
	font-size: 13px;
	color: var(--pdq-color-ink-soft);
	font-weight: 500;
}

.pdq-repeater__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pdq-repeater__item {
	position: relative;
}

.pdq-repeater__remove {
	position: absolute;
	top: 14px;
	right: 14px;
	background: none;
	border: 0;
	color: var(--pdq-color-ink-mute);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	font-family: inherit;
	font-size: 12px;
}

.pdq-repeater__remove:hover {
	color: var(--pdq-color-warn);
	background: var(--pdq-color-warn-soft);
}

.pdq-repeater__add {
	align-self: flex-start;
}

/* ====================================================================
 * Why-followup textarea
 * ================================================================== */

.pdq-why {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--pdq-color-line-soft);
}

.pdq-why__label {
	font-family: var(--pdq-font-display);
	font-style: italic;
	font-size: 16px;
	color: var(--pdq-color-ink-soft);
	margin-bottom: 8px;
	display: block;
}

/* ====================================================================
 * Buttons
 * ================================================================== */

.pdq-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--pdq-color-line-soft);
}

.pdq-nav__spacer { flex: 1; }

.pdq-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--pdq-font-body);
	font-size: 15px;
	font-weight: 500;
	border-radius: var(--pdq-radius-sm);
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 180ms ease;
	white-space: nowrap;
}

.pdq-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pdq-btn--primary {
	background: var(--pdq-color-accent);
	color: var(--pdq-color-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(200, 255, 92, 0.18);
}

.pdq-btn--primary:hover:not(:disabled) {
	background: var(--pdq-color-accent-strong);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(200, 255, 92, 0.28);
}

.pdq-btn--ghost {
	background: transparent;
	color: var(--pdq-color-ink-soft);
	border-color: var(--pdq-color-line);
}

.pdq-btn--ghost:hover:not(:disabled) {
	border-color: var(--pdq-color-ink-mute);
	color: var(--pdq-color-ink);
}

.pdq-btn--text {
	background: transparent;
	color: var(--pdq-color-accent);
	padding: 6px 0;
	border: 0;
	font-size: 14px;
}

.pdq-btn--text:hover {
	text-decoration: underline;
}

/* ====================================================================
 * Stage 1 — Welcome / site_type
 * ================================================================== */

.pdq-classifier {
	margin-top: 32px;
	padding: 24px;
	background: var(--pdq-color-accent-soft);
	border-radius: var(--pdq-radius-md);
	border: 1px solid rgba(200, 255, 92, 0.28);
}

.pdq-classifier__intro {
	font-family: var(--pdq-font-display);
	font-style: italic;
	font-size: 17px;
	color: var(--pdq-color-accent-strong);
	margin: 0 0 16px;
}

.pdq-classifier__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid rgba(200, 255, 92, 0.18);
	gap: 16px;
}

.pdq-classifier__q:first-child { border-top: 0; }

.pdq-classifier__yn {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.pdq-classifier__btn {
	padding: 6px 14px;
	background: var(--pdq-color-surface);
	border: 1px solid var(--pdq-color-line);
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	color: var(--pdq-color-ink-soft);
	transition: all 180ms ease;
}

.pdq-classifier__btn:hover {
	border-color: var(--pdq-color-accent);
	color: var(--pdq-color-ink);
}

.pdq-classifier__btn--active {
	background: var(--pdq-color-accent);
	color: var(--pdq-color-surface);
	border-color: var(--pdq-color-accent);
}

/* ====================================================================
 * Stage 2 — Contact + consent
 * ================================================================== */

.pdq-consent {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--pdq-color-bg-sunken);
	border-radius: var(--pdq-radius-md);
}

.pdq-consent__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.pdq-consent__cb {
	margin-top: 3px;
	width: 18px; height: 18px;
	accent-color: var(--pdq-color-accent);
	flex-shrink: 0;
}

.pdq-consent__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pdq-color-ink-soft);
}

.pdq-consent__text a {
	color: var(--pdq-color-accent);
	text-decoration: underline;
}

.pdq-turnstile {
	margin-top: 4px;
	min-height: 65px;
}

/* ====================================================================
 * Stage 5 — Curated palette picker (Phase 4 will extend)
 * ================================================================== */

.pdq-palette-picker {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pdq-palette-picker__panels {
	min-height: 280px;
}

.pdq-palette-picker__panel[hidden] { display: none; }

.pdq-palette-picker__intro {
	font-size: 14px;
	color: var(--pdq-color-ink-mute);
	margin: 0 0 20px;
	max-width: 540px;
	line-height: 1.55;
}

.pdq-palette-picker__builder-mount {
	display: contents;
}

/* Tabs (used here and elsewhere) ------------------------------------ */

.pdq-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--pdq-color-bg-sunken);
	border-radius: 999px;
	align-self: flex-start;
}

.pdq-tab {
	border: 0;
	background: transparent;
	padding: 8px 18px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--pdq-color-ink-mute);
	cursor: pointer;
	border-radius: 999px;
	transition: all 180ms ease;
}

.pdq-tab:hover { color: var(--pdq-color-ink); }

.pdq-tab--active {
	background: var(--pdq-color-surface);
	color: var(--pdq-color-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Custom palette builder -------------------------------------------- */

.pdq-builder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.pdq-builder__tokens {
	grid-column: 1 / 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pdq-builder__preview {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	position: sticky;
	top: 32px;
}

.pdq-builder__contrast {
	grid-column: 1 / 3;
}

.pdq-builder__token {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
	background: var(--pdq-color-surface);
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	cursor: default;
}

.pdq-builder__token-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--pdq-color-line);
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: background 220ms ease;
}

.pdq-builder__token-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pdq-builder__token-label {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 15px;
	color: var(--pdq-color-ink);
	letter-spacing: -0.005em;
}

.pdq-builder__token-hint {
	font-size: 12px;
	color: var(--pdq-color-ink-mute);
}

.pdq-builder__token-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pdq-builder__token-picker {
	-webkit-appearance: none;
	appearance: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 50%;
	overflow: hidden;
}

.pdq-builder__token-picker::-webkit-color-swatch-wrapper { padding: 0; }
.pdq-builder__token-picker::-webkit-color-swatch {
	border: 1px solid var(--pdq-color-line);
	border-radius: 50%;
}
.pdq-builder__token-picker::-moz-color-swatch {
	border: 1px solid var(--pdq-color-line);
	border-radius: 50%;
}

.pdq-builder__token-hex {
	width: 92px;
	padding: 8px 10px;
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-sm);
	font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13px;
	color: var(--pdq-color-ink);
	text-transform: uppercase;
	background: var(--pdq-color-bg);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pdq-builder__token-hex:focus {
	outline: none;
	border-color: var(--pdq-color-accent);
	box-shadow: var(--pdq-shadow-focus);
	background: var(--pdq-color-surface);
}

/* Live preview ------------------------------------------------------ */

.pdq-builder__preview-card {
	border-radius: var(--pdq-radius-lg);
	padding: 32px 28px;
	border: 1px solid var(--pdq-color-line);
	box-shadow: var(--pdq-shadow-soft);
	transition: background 280ms ease, color 280ms ease;
}

.pdq-builder__preview-eyebrow {
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 600;
	margin-bottom: 12px;
	transition: color 280ms ease;
}

.pdq-builder__preview-title {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	margin: 0 0 12px;
	letter-spacing: -0.015em;
}

.pdq-builder__preview-body {
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 20px;
	transition: color 280ms ease;
}

.pdq-builder__preview-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pdq-builder__preview-btn {
	padding: 10px 18px;
	border-radius: var(--pdq-radius-sm);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: default;
	transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
}

.pdq-builder__preview-btn--ghost {
	background: transparent !important;
	border-color: currentColor;
}

/* Contrast checks --------------------------------------------------- */

.pdq-builder__contrast-head {
	font-family: var(--pdq-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	color: var(--pdq-color-ink);
	margin: 24px 0 12px;
}

.pdq-builder__contrast-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.pdq-builder__contrast-item {
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	background: var(--pdq-color-surface);
	overflow: hidden;
}

.pdq-builder__contrast-sample {
	padding: 14px 16px;
	font-size: 14px;
	transition: background 220ms ease, color 220ms ease;
	min-height: 48px;
	display: flex;
	align-items: center;
}

.pdq-builder__contrast-meta {
	padding: 10px 14px;
	background: var(--pdq-color-bg-sunken);
	border-top: 1px solid var(--pdq-color-line-soft);
}

.pdq-builder__contrast-label {
	font-size: 12px;
	color: var(--pdq-color-ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.pdq-builder__contrast-verdict {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pdq-builder__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.pdq-builder__badge--aaa      { background: #DDE9DC; color: #2F5A33; }
.pdq-builder__badge--aa       { background: #DEE7EE; color: #2E5778; }
.pdq-builder__badge--aa_large { background: #FBE7C8; color: #7C5614; }
.pdq-builder__badge--fail     { background: var(--pdq-color-warn-soft); color: var(--pdq-color-warn); }

.pdq-builder__contrast-item--fail { border-color: var(--pdq-color-warn); }
.pdq-builder__contrast-item--aa_large { border-color: #E6B973; }

.pdq-builder__ratio {
	font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	color: var(--pdq-color-ink-mute);
}

/* Builder responsive ------------------------------------------------ */

@media (max-width: 900px) {
	.pdq-builder {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.pdq-builder__tokens,
	.pdq-builder__preview,
	.pdq-builder__contrast {
		grid-column: 1;
	}
	.pdq-builder__preview {
		grid-row: auto;
		position: static;
	}
	.pdq-builder__token {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
	}
	.pdq-builder__token-controls {
		grid-column: 1 / 3;
		justify-content: flex-end;
	}
}

/* ====================================================================
 * Stage 5 — Curated palette grid (unchanged shared with Phase 3)
 * ================================================================== */

.pdq-palettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.pdq-palette {
	position: relative;
	padding: 0;
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	cursor: pointer;
	background: var(--pdq-color-surface);
	overflow: hidden;
	transition: all 180ms ease;
	font-family: inherit;
	text-align: left;
	color: inherit;
}

.pdq-palette:hover {
	border-color: var(--pdq-color-ink-mute);
	transform: translateY(-2px);
	box-shadow: var(--pdq-shadow-soft);
}

.pdq-palette--selected {
	border-color: var(--pdq-color-accent);
	box-shadow: inset 0 0 0 1px var(--pdq-color-accent);
}

.pdq-palette__swatches {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	height: 56px;
}

.pdq-palette__swatch {
	height: 100%;
}

.pdq-palette__body {
	padding: 14px 16px;
}

.pdq-palette__name {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin-bottom: 2px;
}

.pdq-palette__mood {
	font-size: 12px;
	color: var(--pdq-color-ink-mute);
	font-style: italic;
}

/* Font preview cards (Q16) */

.pdq-fonts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.pdq-font {
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	padding: 20px 22px;
	cursor: pointer;
	background: var(--pdq-color-surface);
	transition: all 180ms ease;
	font-family: inherit;
	text-align: left;
	color: inherit;
}

.pdq-font:hover {
	border-color: var(--pdq-color-ink-mute);
	transform: translateY(-2px);
}

.pdq-font--selected {
	border-color: var(--pdq-color-accent);
	box-shadow: inset 0 0 0 1px var(--pdq-color-accent);
}

.pdq-font__heading {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 4px;
	color: var(--pdq-color-ink);
}

.pdq-font__body {
	font-size: 14px;
	color: var(--pdq-color-ink-soft);
	margin-bottom: 12px;
	line-height: 1.5;
}

.pdq-font__name {
	font-family: var(--pdq-font-body);
	font-size: 11px;
	color: var(--pdq-color-ink-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ====================================================================
 * Stage 8 — Design picker
 * ================================================================== */

.pdq-designs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.pdq-design {
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	overflow: hidden;
	cursor: pointer;
	background: var(--pdq-color-surface);
	transition: all 180ms ease;
	display: flex;
	flex-direction: column;
	font-family: inherit;
	text-align: left;
	color: inherit;
	padding: 0;
}

.pdq-design:hover {
	border-color: var(--pdq-color-ink-mute);
	transform: translateY(-2px);
	box-shadow: var(--pdq-shadow-soft);
}

.pdq-design--selected {
	border-color: var(--pdq-color-accent);
	box-shadow: inset 0 0 0 1px var(--pdq-color-accent);
}

.pdq-design__thumb {
	height: 160px;
	background: linear-gradient(135deg, var(--pdq-d-c1, #2D5F4A), var(--pdq-d-c2, #D4B896));
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdq-design__thumb-letter {
	font-family: var(--pdq-font-display);
	font-weight: 700;
	font-size: 72px;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.pdq-design__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.pdq-design__name {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.25;
}

.pdq-design__tagline {
	font-size: 13px;
	color: var(--pdq-color-ink-soft);
	line-height: 1.45;
}

.pdq-design__ideal {
	font-size: 12px;
	color: var(--pdq-color-ink-mute);
	margin-top: auto;
	padding-top: 12px;
	font-style: italic;
}

.pdq-design__preview-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--pdq-color-accent);
	text-decoration: none;
	font-weight: 500;
}

.pdq-design__preview-link:hover { text-decoration: underline; }

.pdq-design__preview-link--disabled {
	color: var(--pdq-color-ink-mute);
	cursor: default;
}

/* ====================================================================
 * Stage 9 — Thanks
 * ================================================================== */

.pdq-thanks {
	text-align: center;
	padding: 40px 0;
}

.pdq-thanks__icon {
	font-size: 52px;
	margin-bottom: 16px;
	display: inline-block;
	animation: pdq-pop-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pdq-pop-in {
	from { opacity: 0; transform: scale(0.5); }
	to { opacity: 1; transform: scale(1); }
}

.pdq-thanks__title {
	font-family: var(--pdq-font-display);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.2;
	color: var(--pdq-color-ink);
	margin: 0 0 16px;
}

.pdq-thanks__body {
	font-size: 17px;
	color: var(--pdq-color-ink-soft);
	max-width: 520px;
	margin: 0 auto 32px;
	line-height: 1.6;
}

.pdq-thanks__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ====================================================================
 * Toast (transient error messages)
 * ================================================================== */

.pdq-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--pdq-color-ink);
	color: var(--pdq-color-bg);
	padding: 12px 20px;
	border-radius: var(--pdq-radius-sm);
	font-size: 14px;
	box-shadow: var(--pdq-shadow-soft);
	z-index: 100;
	max-width: calc(100% - 48px);
}

/* ====================================================================
 * Responsive
 * ================================================================== */

@media (max-width: 1300px) {
	.pdq-root {
		/* Mid-range laptops: relax the gutter so content has room to
		 * breathe without forcing a tight reading column. */
		--pdq-gutter: 40px;
		--pdq-sidebar-w: 280px;
	}
}

@media (max-width: 900px) {
	.pdq-root {
		--pdq-gutter: 24px;
	}

	.pdq-shell {
		grid-template-columns: 1fr;
	}

	.pdq-mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 24px;
		min-height: 52px;             /* solid 52px touch target */
		background: var(--pdq-color-bg-sunken);
		border: 0;
		border-bottom: 1px solid var(--pdq-color-line);
		font-family: var(--pdq-font-body);
		font-size: 15px;
		font-weight: 500;
		color: var(--pdq-color-ink);
		cursor: pointer;
		position: sticky;
		top: 0;
		z-index: 25;
	}

	.pdq-mobile-toggle__icon {
		width: 14px;
		height: 14px;
		transition: transform 200ms ease;
	}

	.pdq-mobile-toggle[aria-expanded="true"] .pdq-mobile-toggle__icon {
		transform: rotate(180deg);
	}

	.pdq-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		height: 100dvh;                 /* dvh = dynamic viewport, avoids iOS jump */
		max-width: 360px;
		padding: 24px 24px 32px;
		border-right: 1px solid var(--pdq-color-line);
		border-bottom: 0;
		overflow-y: auto;
		z-index: 50;
		background: var(--pdq-color-bg-sunken);
		transform: translateX(-100%);
		transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
		display: flex;
		flex-direction: column;
	}

	.pdq-sidebar[data-pdq-open="1"] {
		transform: translateX(0);
		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
	}

	/* Backdrop scrim — visible when sidebar is open, click closes it.
	 * Inserted via JS so older non-JS fallback still works. */
	.pdq-sidebar-scrim {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 280ms ease;
		z-index: 45;
		border: 0;
		cursor: pointer;
	}

	.pdq-sidebar-scrim[data-pdq-visible="1"] {
		opacity: 1;
		pointer-events: auto;
	}

	/* When sidebar is open, lock body scroll behind it */
	.pdq-root[data-pdq-locked="1"] { overflow: hidden; }

	.pdq-sidebar__head {
		display: flex;            /* keep brand visible inside the slideover */
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid var(--pdq-color-line);
	}

	.pdq-main {
		padding: 32px var(--pdq-gutter) 48px;
	}

	.pdq-stage__num {
		font-size: 48px;
	}

	.pdq-stage__title {
		font-size: 30px;
	}

	.pdq-stage__subtitle {
		font-size: 16px;
		margin-bottom: 36px;
	}

	.pdq-question__label {
		font-size: 19px;
	}

	.pdq-nav {
		margin-top: 40px;
		padding-top: 24px;
	}

	/* Buttons get bigger touch targets on mobile */
	.pdq-btn {
		min-height: 48px;
		padding: 12px 22px;
	}

	/* Inputs MUST be ≥16px font-size on mobile so iOS doesn't
	 * zoom-on-focus. */
	.pdq-input,
	.pdq-textarea,
	input[type="text"],
	input[type="email"],
	input[type="url"],
	textarea {
		font-size: 16px;
	}

	/* Larger start-over hit area on mobile */
	.pdq-start-over {
		padding: 11px 18px;
		font-size: 12px;
		align-self: flex-start;
	}
}

@media (max-width: 480px) {
	.pdq-root {
		--pdq-gutter: 18px;
	}

	.pdq-options--icon-cards {
		grid-template-columns: 1fr;
	}

	.pdq-option--icon-card {
		min-height: auto;
		padding: 20px;
	}

	.pdq-stage__title {
		font-size: 26px;
	}
}

/* ====================================================================
 * Reduced motion
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.pdq-root *,
	.pdq-root *::before,
	.pdq-root *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==================================================================
 * Phase 7 — A11y
 * =============================================================== */

/* Skip link — visually hidden until focused */
.pdq-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 8px 16px;
	background: var(--pdq-color-ink);
	color: var(--pdq-color-bg);
	font-family: var(--pdq-font-body);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-radius: 0 0 var(--pdq-radius-sm) 0;
}

.pdq-skip-link:focus {
	left: 0;
	outline: 2px solid var(--pdq-color-accent);
	outline-offset: -2px;
}

/* Stage container — when JS focuses it, suppress the default outline
 * (the new content itself signals the transition) but keep the
 * focus-visible state available for keyboard users who tab back into
 * it deliberately. */
.pdq-stage:focus { outline: none; }
.pdq-stage:focus-visible {
	outline: 2px solid var(--pdq-color-accent);
	outline-offset: 4px;
	border-radius: var(--pdq-radius-md);
}

/* ==================================================================
 * Phase 8 — Dark theme polish + interactivity
 *
 * The cascade did most of the work via the variables at the top, but
 * a few specific components benefit from explicit dark-theme tuning:
 * sharper button hover states, accent glow on focus, option-card lift,
 * input field treatment.
 * =============================================================== */

/* Skip-link tuned for dark theme */
.pdq-skip-link {
	background: var(--pdq-color-accent);
	color: var(--pdq-color-accent-fg);
	font-family: var(--pdq-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

/* Subtle vertical accent stripe on sidebar — gives the dark side panel
 * a distinct identity from the main column. */
.pdq-sidebar {
	background: var(--pdq-color-bg-sunken);
	border-right: 1px solid var(--pdq-color-line);
}

/* Active stage in sidebar nav: bright accent strip + lime text */
.pdq-stage-list__item--active,
.pdq-stage-list__item[aria-current="step"] {
	color: var(--pdq-color-accent);
	background: linear-gradient(90deg, var(--pdq-color-accent-soft) 0%, transparent 100%);
}
.pdq-stage-list__item--active .pdq-stage-list__num,
.pdq-stage-list__item[aria-current="step"] .pdq-stage-list__num {
	color: var(--pdq-color-accent);
}

.pdq-stage-list__item--completed .pdq-stage-list__num::before {
	color: var(--pdq-color-accent);
}

/* Buttons — punchy, with subtle lift + glow on hover */
.pdq-btn {
	font-family: var(--pdq-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform var(--pdq-transition), box-shadow var(--pdq-transition), background var(--pdq-transition), color var(--pdq-transition), border-color var(--pdq-transition);
}

.pdq-btn--primary {
	background: var(--pdq-color-accent);
	color: var(--pdq-color-accent-fg);
	border: 1px solid var(--pdq-color-accent);
	box-shadow: var(--pdq-shadow-accent);
}
.pdq-btn--primary:hover:not(:disabled) {
	background: var(--pdq-color-accent-strong);
	border-color: var(--pdq-color-accent-strong);
	transform: translateY(-1px);
	box-shadow: 0 0 32px rgba(200, 255, 92, 0.32);
}
.pdq-btn--primary:active:not(:disabled) {
	transform: translateY(0);
}
.pdq-btn--primary:disabled {
	background: var(--pdq-color-surface);
	color: var(--pdq-color-ink-mute);
	border-color: var(--pdq-color-line);
	box-shadow: none;
}

.pdq-btn--ghost {
	background: transparent;
	color: var(--pdq-color-ink-soft);
	border: 1px solid var(--pdq-color-line);
}
.pdq-btn--ghost:hover:not(:disabled) {
	color: var(--pdq-color-ink);
	border-color: var(--pdq-color-line-strong);
	background: var(--pdq-color-surface);
}

/* Inputs — dark surface, accent ring on focus */
.pdq-input,
.pdq-textarea,
input[type="text"]:not([data-pdq-honeypot] input):not(.pdq-builder__hex-input):not(.pdq-builder__name-input),
input[type="email"],
input[type="url"],
textarea {
	background: var(--pdq-color-surface);
	border: 1px solid var(--pdq-color-line);
	color: var(--pdq-color-ink);
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.pdq-input::placeholder,
.pdq-textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
	color: var(--pdq-color-ink-mute);
}
.pdq-input:focus,
.pdq-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--pdq-color-accent);
	background: var(--pdq-color-surface-2);
	box-shadow: var(--pdq-shadow-focus);
}

/* Option cards (single/multi select) — lift on hover, accent border on
 * selected. The "card" feeling makes the quiz feel more app-like than
 * form-like. */
.pdq-option {
	background: var(--pdq-color-surface);
	border: 1px solid var(--pdq-color-line);
	border-radius: var(--pdq-radius-md);
	transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
	cursor: pointer;
}
.pdq-option:hover {
	transform: translateY(-2px);
	border-color: var(--pdq-color-line-strong);
	background: var(--pdq-color-surface-2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.pdq-option--selected,
.pdq-option[aria-checked="true"],
.pdq-option[data-pdq-selected="1"] {
	border-color: var(--pdq-color-accent);
	background: var(--pdq-color-surface-2);
	box-shadow: var(--pdq-shadow-focus);
}

/* Checkbox & radio dots — bright lime when checked */
.pdq-option input:checked + .pdq-option__indicator,
.pdq-option__indicator--checked {
	background: var(--pdq-color-accent);
	border-color: var(--pdq-color-accent);
}

/* Progress bar — accent fill on dark track */
.pdq-progress__bar {
	background: var(--pdq-color-line-soft);
	overflow: hidden;
	border-radius: 999px;
}
.pdq-progress__fill {
	background: var(--pdq-color-accent);
	box-shadow: 0 0 12px rgba(200, 255, 92, 0.4);
	transition: width 480ms cubic-bezier(0.2, 0, 0, 1);
}

/* Sync status — quiet by default, lime check on success */
.pdq-sync-status {
	font-family: var(--pdq-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--pdq-color-ink-mute);
}
.pdq-sync-status--ok { color: var(--pdq-color-accent); }
.pdq-sync-status--error { color: var(--pdq-color-warn); }

/* Toast — dark elevated card with accent left edge */
.pdq-toast {
	background: var(--pdq-color-surface-2);
	color: var(--pdq-color-ink);
	border: 1px solid var(--pdq-color-line-strong);
	border-left: 3px solid var(--pdq-color-accent);
	box-shadow: var(--pdq-shadow-glow);
	font-family: var(--pdq-font-body);
}

/* Field labels: tighter, with mono accent for technical-feel */
.pdq-field__label {
	color: var(--pdq-color-ink);
	font-weight: 500;
	font-size: 14px;
}

/* Stage container backdrop — slightly elevated surface so it reads as
 * "content card" against the bg */
.pdq-main {
	background: var(--pdq-color-bg);
}

/* Eyebrow text above stage headlines — mono, accent, uppercase */
.pdq-stage__eyebrow {
	font-family: var(--pdq-font-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--pdq-color-accent);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Mobile toggle — dark surface */
.pdq-mobile-toggle {
	background: var(--pdq-color-surface);
	color: var(--pdq-color-ink);
	border: 1px solid var(--pdq-color-line);
}
.pdq-mobile-toggle[aria-expanded="true"] {
	border-color: var(--pdq-color-accent);
}

/* Selection highlight — lime on dark */
.pdq-root ::selection {
	background: var(--pdq-color-accent);
	color: var(--pdq-color-accent-fg);
}

/* Reduced-motion: turn off all the lifts and glows */
@media (prefers-reduced-motion: reduce) {
	.pdq-btn,
	.pdq-option,
	.pdq-input,
	.pdq-progress__fill {
		transition: none;
	}
	.pdq-btn--primary:hover,
	.pdq-option:hover {
		transform: none;
	}
}

/* Start-over button — discrete pill in the sidebar foot, only visible
 * once user has any state to lose. Hover gets accent border so it's
 * obvious it's interactive but it doesn't compete with primary CTAs. */
.pdq-start-over {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 7px 14px;
	background: transparent;
	color: var(--pdq-color-ink-mute);
	border: 1px solid var(--pdq-color-line);
	border-radius: 999px;
	font-family: var(--pdq-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.pdq-start-over:hover {
	color: var(--pdq-color-warn);
	border-color: var(--pdq-color-warn);
	background: var(--pdq-color-warn-soft);
}
.pdq-start-over:focus-visible {
	outline: none;
	box-shadow: var(--pdq-shadow-focus);
}
.pdq-start-over[hidden] { display: none; }