/* ==========================================================================
   Undertone Quiz — warm, editorial, mobile-first
   Palette shifts by result: cool / warm / neutral accent tokens below.
   ========================================================================== */

.undertone-quiz-mount {
	--uq-bg: #faf6f1;
	--uq-surface: #ffffff;
	--uq-surface-2: #f3ece3;
	--uq-ink: #2a2622;
	--uq-ink-soft: #6f665d;
	--uq-line: #e7ddd1;
	--uq-accent: #b98a6a;          /* neutral default */
	--uq-accent-soft: #f0e4da;
	--uq-radius: 18px;
	--uq-radius-sm: 12px;
	--uq-shadow: 0 10px 30px rgba(74, 58, 45, 0.08);
	--uq-shadow-sm: 0 3px 10px rgba(74, 58, 45, 0.06);
	--uq-serif: "Playfair Display", Georgia, "Times New Roman", serif;

	max-width: 640px;
	margin: 2.5rem auto;
	background: var(--uq-bg);
	border: 1px solid var(--uq-line);
	border-radius: var(--uq-radius);
	box-shadow: var(--uq-shadow);
	color: var(--uq-ink);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Undertone accent themes */
.undertone-quiz-mount[data-tone="cool"]    { --uq-accent: #7c8fb0; --uq-accent-soft: #e4e9f2; }
.undertone-quiz-mount[data-tone="warm"]    { --uq-accent: #c69349; --uq-accent-soft: #f5e9d2; }
.undertone-quiz-mount[data-tone="neutral"] { --uq-accent: #a98c74; --uq-accent-soft: #efe6db; }

.uq-inner { padding: clamp(1.4rem, 4vw, 2.4rem); }

/* ---- Type ---------------------------------------------------------------- */
.uq-eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--uq-accent);
	font-weight: 600;
	margin: 0 0 0.6rem;
}
.uq-h {
	font-family: var(--uq-serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 5vw, 2rem);
}
.uq-sub { color: var(--uq-ink-soft); font-size: 0.98rem; line-height: 1.55; margin: 0; }

/* ---- Progress ------------------------------------------------------------ */
.uq-progress { height: 4px; background: var(--uq-line); }
.uq-progress-bar {
	height: 100%;
	background: var(--uq-accent);
	width: 0;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Steps / transitions ------------------------------------------------- */
.uq-step { display: none; animation: uq-fade 0.45s ease both; }
.uq-step.is-active { display: block; }
@keyframes uq-fade {
	from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
	to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* ---- Intro --------------------------------------------------------------- */
.uq-intro { text-align: center; }
.uq-intro .uq-h { margin-bottom: 0.8rem; }
.uq-meta { font-size: 0.82rem; color: var(--uq-ink-soft); margin-top: 1rem; }

/* ---- Answer cards -------------------------------------------------------- */
.uq-qhead { margin-bottom: 1.3rem; }
.uq-answers { display: grid; gap: 0.7rem; }
.uq-answer {
	appearance: none;
	text-align: left;
	background: var(--uq-surface);
	border: 1.5px solid var(--uq-line);
	border-radius: var(--uq-radius-sm);
	padding: 1rem 1.1rem;
	font-size: 1rem;
	color: var(--uq-ink);
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	line-height: 1.4;
}
.uq-answer:hover { border-color: var(--uq-accent); box-shadow: var(--uq-shadow-sm); }
.uq-answer:active { transform: scale(0.985); }
.uq-answer.is-picked {
	border-color: var(--uq-accent);
	background: var(--uq-accent-soft);
	box-shadow: var(--uq-shadow-sm);
}

/* ---- Nav ----------------------------------------------------------------- */
.uq-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.3rem; }
.uq-back {
	background: none; border: none; color: var(--uq-ink-soft);
	font-size: 0.9rem; cursor: pointer; padding: 0.4rem 0; visibility: hidden;
}
.uq-back.is-shown { visibility: visible; }
.uq-count { font-size: 0.82rem; color: var(--uq-ink-soft); }

/* ---- Buttons ------------------------------------------------------------- */
.uq-btn {
	appearance: none; border: none; cursor: pointer;
	background: var(--uq-accent); color: #fff;
	font-size: 1rem; font-weight: 600;
	padding: 0.95rem 1.6rem; border-radius: 999px;
	transition: transform 0.12s ease, filter 0.15s ease;
	position: relative; overflow: hidden;
}
.uq-btn:hover { filter: brightness(1.05); }
.uq-btn:active { transform: scale(0.98); }
/* subtle shine to draw the eye to the opt-in */
.uq-btn--gate::after {
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg); animation: uq-shine 3.4s ease-in-out infinite;
}
@keyframes uq-shine { 0% { left: -60%; } 55%,100% { left: 130%; } }

/* ---- Loading ------------------------------------------------------------- */
.uq-loading { text-align: center; padding: 2.2rem 0; }
.uq-dots { display: inline-flex; gap: 6px; margin-top: 1rem; }
.uq-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--uq-accent); opacity: 0.4; animation: uq-pulse 1.1s ease-in-out infinite; }
.uq-dots span:nth-child(2) { animation-delay: 0.18s; }
.uq-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes uq-pulse { 0%,100% { opacity: 0.35; transform: scale(0.9);} 50% { opacity: 1; transform: scale(1);} }

/* ---- Result + soft gate -------------------------------------------------- */
.uq-result-label { font-family: var(--uq-serif); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 700; margin: 0.2rem 0 0.6rem; }
.uq-result-label em { color: var(--uq-accent); font-style: normal; }
.uq-result-body { color: var(--uq-ink-soft); line-height: 1.6; font-size: 0.98rem; }
.uq-result-body p { margin: 0 0 0.9rem; }

.uq-products { display: grid; gap: 0.8rem; margin: 1.3rem 0; }
.uq-product {
	display: flex; gap: 0.9rem; align-items: center;
	background: var(--uq-surface); border: 1px solid var(--uq-line);
	border-radius: var(--uq-radius-sm); padding: 0.8rem 0.9rem;
	text-decoration: none; color: var(--uq-ink); box-shadow: var(--uq-shadow-sm);
}
.uq-product-swatch { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--uq-accent-soft); border: 1px solid var(--uq-line); }
.uq-product-name { font-weight: 600; font-size: 0.95rem; display: block; }
.uq-product-note { font-size: 0.82rem; color: var(--uq-ink-soft); }

/* the gate: blur the matches until opt-in */
.uq-locked .uq-products { filter: blur(7px); pointer-events: none; user-select: none; }
.uq-gate {
	background: var(--uq-surface); border: 1px solid var(--uq-line);
	border-radius: var(--uq-radius-sm); padding: 1.3rem; margin-top: 0.4rem;
	box-shadow: var(--uq-shadow-sm);
}
.uq-gate .uq-h { font-size: clamp(1.15rem, 4.5vw, 1.4rem); }
.uq-beehiiv-slot { margin-top: 0.9rem; }
.uq-skip { display: block; text-align: center; margin-top: 0.9rem; font-size: 0.85rem; color: var(--uq-ink-soft); background: none; border: none; cursor: pointer; text-decoration: underline; width: 100%; }
.uq-gate.is-hidden { display: none; }

.uq-unlocked .uq-products { filter: none; pointer-events: auto; transition: filter 0.6s ease; }