/*
 * AI Risk Quiz — visitor app styles.
 * Ported 1:1 from the validated prototype (AI Risk Quiz v2.dc.html):
 * every inline style becomes a class here. Fonts ('DM Sans', 'Playfair
 * Display') are loaded by the theme via wp_head.
 */

/* ── Base ─────────────────────────────────────────────────────── */
html, body.aiq-body { margin: 0; padding: 0; background: #192E28; }
body.aiq-body { -webkit-font-smoothing: antialiased; }
.aiq-app a { color: #DED5BE; }
.aiq-app a:hover { color: #E8440A; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }

.aiq-app {
	min-height: 100dvh;
	background: #192E28;
	color: #DED5BE;
	font-family: 'DM Sans', sans-serif;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aiq-bg {
	position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(640px 420px at 16% 6%, rgba(232,68,10,.07), transparent 70%),
		radial-gradient(720px 520px at 86% 94%, rgba(222,213,190,.05), transparent 70%);
}
.aiq-tint {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity .18s ease; pointer-events: none; z-index: 0;
}

/* Visually-hidden honeypot */
.aiq-hp {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	left: -9999px; opacity: 0; pointer-events: none;
}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardNudge {
	0%, 70%, 100% { transform: translateX(0px) rotate(0deg); }
	20% { transform: translateX(30px) rotate(3deg); }
	45% { transform: translateX(-24px) rotate(-2.5deg); }
}
.aiq-fade { animation: fadeUp .5s ease both; }

/* ── Shared bits ──────────────────────────────────────────────── */
.aiq-symbol { height: 22px; opacity: .9; }
.aiq-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
	text-transform: uppercase; color: rgba(222,213,190,.65);
}
.aiq-eyebrow-rule { display: block; width: 22px; height: 2px; background: #E8440A; }
.aiq-credibility { font-size: 12px; line-height: 1.5; color: rgba(222,213,190,.38); max-width: 44ch; }

.aiq-btn-primary {
	cursor: pointer; border: none; border-radius: 8px;
	background: #E8440A; color: #FFFFFF;
	font-family: 'DM Sans', sans-serif; font-weight: 600;
	box-shadow: 0 6px 22px rgba(232,68,10,.35);
	transition: transform .18s ease, box-shadow .18s ease;
}
.aiq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232,68,10,.48); }
.aiq-btn-primary:active { transform: translateY(0px) scale(.98); }

.aiq-btn-ghost {
	cursor: pointer; border: 1px solid rgba(222,213,190,.35); border-radius: 8px;
	background: transparent; color: #DED5BE;
	font-family: 'DM Sans', sans-serif; font-weight: 600;
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.aiq-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(222,213,190,.7); background: rgba(255,255,255,.04); }
.aiq-btn-ghost:active { transform: scale(.97); }

/* ── Screens (common) ─────────────────────────────────────────── */
.aiq-screen { position: relative; z-index: 1; box-sizing: border-box; }

/* ── Intro ────────────────────────────────────────────────────── */
.aiq-intro {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 56px 24px; max-width: 620px;
}
.aiq-intro-logo { height: 30px; margin-bottom: 46px; }
.aiq-intro .aiq-eyebrow { margin-bottom: 20px; }
.aiq-intro-title {
	margin: 0 0 18px; font-family: 'Playfair Display', serif; font-weight: 500;
	font-size: clamp(34px, 6vw, 52px); line-height: 1.12; color: #DED5BE;
}
.aiq-intro-title em { color: #E8440A; font-weight: 500; font-style: italic; }
.aiq-intro-lead {
	margin: 0 0 26px; font-size: 16.5px; line-height: 1.6;
	color: rgba(222,213,190,.78); max-width: 46ch;
}
.aiq-intro-start { font-size: 16px; padding: 16px 30px; }
.aiq-intro-meta { margin-top: 18px; font-size: 12.5px; color: rgba(222,213,190,.45); }
.aiq-intro-cred { margin-top: 30px; }

/* ── Sorting card + choices ───────────────────────────────────── */
.aiq-sort {
	width: 100%; max-width: 520px; display: flex; flex-direction: column;
	align-items: center; padding: 44px 22px 52px;
}
.aiq-sort .aiq-symbol { margin-bottom: 34px; }
.aiq-sort-title {
	margin: 0 0 8px; text-align: center; font-family: 'Playfair Display', serif;
	font-weight: 500; font-size: clamp(26px, 5vw, 34px); line-height: 1.2; color: #DED5BE;
}
.aiq-sort-title em, .aiq-codify-title em { color: #E8440A; font-weight: 500; font-style: italic; }
.aiq-sort-sub {
	margin: 0 0 28px; text-align: center; font-size: 13.5px; color: rgba(222,213,190,.55);
}
.aiq-choices { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.aiq-choices-cod { max-width: 470px; }

.aiq-choice {
	cursor: pointer; width: 100%; box-sizing: border-box;
	display: flex; align-items: center; gap: 16px; text-align: left;
	border-radius: 12px; padding: 18px 20px;
	background: linear-gradient(135deg, rgba(222,213,190,.10), rgba(255,255,255,.03));
	border: 1px solid rgba(222,213,190,.14);
	border-top-color: rgba(222,213,190,.3); border-left-color: rgba(222,213,190,.22);
	box-shadow: 0 8px 32px rgba(0,0,0,.45);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	color: #DED5BE; font-family: 'DM Sans', sans-serif;
	animation: fadeUp .5s ease both;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.aiq-choice:hover { transform: translateY(-3px); border-color: rgba(232,68,10,.55); box-shadow: 0 12px 38px rgba(0,0,0,.55); }
.aiq-choice:active { transform: translateY(-1px) scale(.99); }
.aiq-choice-emoji { font-size: 28px; line-height: 1; flex: none; }
.aiq-choices-cod .aiq-choice-emoji { font-size: 26px; }
.aiq-choice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aiq-choice-label { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.aiq-choices-cod .aiq-choice-label { font-size: 15px; line-height: 1.45; }
.aiq-choice-sub { font-size: 12.5px; line-height: 1.4; color: rgba(222,213,190,.55); }

/* ── Swipe deck ───────────────────────────────────────────────── */
.aiq-swipe {
	width: 100%; max-width: 520px; min-height: 100dvh;
	display: flex; flex-direction: column; align-items: center;
	justify-content: space-between; gap: 14px; padding: 20px 20px 26px;
}
.aiq-side {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 0;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 18px 16px; border-radius: 14px; pointer-events: none;
}
.aiq-side-no {
	left: 10px; background: rgba(222,213,190,.08);
	border: 1.5px solid rgba(222,213,190,.4); box-shadow: 0 0 24px rgba(222,213,190,.08);
}
.aiq-side-yes {
	right: 10px; background: rgba(232,68,10,.12);
	border: 1.5px solid rgba(232,68,10,.5); box-shadow: 0 0 24px rgba(232,68,10,.12);
}
.aiq-side-arrow { font-size: 42px; line-height: 1; font-weight: 700; }
.aiq-side-no .aiq-side-arrow, .aiq-side-no .aiq-side-label { color: #CDC4AC; }
.aiq-side-yes .aiq-side-arrow, .aiq-side-yes .aiq-side-label { color: #F0774A; }
.aiq-side-label { font-size: 16px; font-weight: 800; letter-spacing: 2.5px; }

/* The side pillars only have room beside the deck on wide screens; on
 * mobile they end up clipped behind the card. Hide them entirely there:
 * the swipe legend and tap buttons already carry the yes/no directions. */
@media (max-width: 1023px) {
	.aiq-side { display: none; }
}

/* Desktop: the pillars emerge from behind the card. Their inner end is
 * tucked under the card (z-index 0 vs the card's 2/3), so no visible
 * edge; the arrow and label peek out beside the deck. Extra inner
 * padding keeps the content in the visible part. */
@media (min-width: 1024px) {
	.aiq-side { width: 150px; }
	.aiq-side-no {
		left: auto; right: calc(50% + 140px);
		padding-right: 46px;
	}
	.aiq-side-yes {
		right: auto; left: calc(50% + 140px);
		padding-left: 46px;
	}
	/* Pull the deck header and tap buttons toward the card instead of
	 * pinning them to the viewport edges. Mobile keeps space-between. */
	.aiq-swipe { min-height: 0; justify-content: center; gap: 36px; padding: 40px 20px; }
}

.aiq-swipe-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aiq-dots { display: flex; gap: 6px; }
.aiq-dot { display: block; width: 7px; height: 7px; border-radius: 999px; transition: background .2s ease, transform .2s ease; }
.aiq-counter { font-size: 12px; color: rgba(222,213,190,.5); font-variant-numeric: tabular-nums; }
.aiq-swipe-legend {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	font-size: 12.5px; font-weight: 600; color: rgba(222,213,190,.78);
}
.aiq-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.aiq-legend-arrow { font-weight: 700; }
.aiq-legend-no { color: #CDC4AC; }
.aiq-legend-yes { color: #F0774A; }
.aiq-legend-div { width: 1px; height: 14px; background: rgba(222,213,190,.22); }
.aiq-swipe-hint { font-size: 11.5px; color: rgba(222,213,190,.45); }

.aiq-card-area { position: relative; width: min(88vw, 362px); height: min(56dvh, 430px); flex: none; }
.aiq-card-bg2 {
	position: absolute; inset: 0; z-index: 1; border-radius: 16px;
	background: #243F38; transform: translateY(26px) scale(.91);
	box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.aiq-card-next {
	position: absolute; inset: 0; z-index: 2; border-radius: 16px;
	background: #2A4A44; transform: translateY(13px) scale(.955);
	box-shadow: 0 12px 34px rgba(0,0,0,.35);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 22px; padding: 34px 30px; box-sizing: border-box; text-align: center; overflow: hidden;
}
.aiq-card-drag {
	position: absolute; inset: 0; z-index: 3; touch-action: none;
	cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform;
}
.aiq-card-face {
	width: 100%; height: 100%; box-sizing: border-box; border-radius: 16px;
	background: linear-gradient(155deg, #2E5248, #243F38);
	box-shadow: 0 16px 44px rgba(0,0,0,.45);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 22px; padding: 34px 30px; text-align: center; position: relative; overflow: hidden;
}
.aiq-card-emoji { font-size: 52px; line-height: 1; }
.aiq-card-text {
	font-size: 21px; font-weight: 600; color: #DED5BE;
	line-height: 1.45; letter-spacing: -0.01em; max-width: 26ch;
}
.aiq-stamp {
	position: absolute; top: 24px; font-size: 17px; font-weight: 800; letter-spacing: 1.5px;
	padding: 5px 12px; border-radius: 8px; opacity: 0;
	transition: opacity .12s ease; background: rgba(20,38,31,.55);
}
.aiq-stamp-no { left: 20px; transform: rotate(-12deg); border: 3px solid #CDC4AC; color: #CDC4AC; }
.aiq-stamp-yes { right: 20px; transform: rotate(12deg); border: 3px solid #E8440A; color: #E8440A; }

.aiq-swipe-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.aiq-swipe-actions > div { display: flex; gap: 12px; align-items: stretch; }
.aiq-swipe .aiq-btn-ghost,
.aiq-swipe .aiq-btn-swipe-yes {
	min-height: 52px; font-size: 15px; padding: 13px 22px; border-radius: 8px;
}
.aiq-swipe .aiq-btn-ghost:hover { transform: translateY(-2px); }
.aiq-btn-swipe-yes:active { transform: scale(.97); }
.aiq-swipe-actions { flex-direction: row; }

/* ── Codification question ────────────────────────────────────── */
.aiq-codify {
	width: 100%; max-width: 560px; display: flex; flex-direction: column;
	align-items: center; padding: 44px 22px 52px;
}
.aiq-codify .aiq-symbol { margin-bottom: 34px; }
.aiq-codify .aiq-eyebrow { margin-bottom: 16px; }
.aiq-codify-title {
	margin: 0 0 30px; text-align: center; font-family: 'Playfair Display', serif;
	font-weight: 500; font-size: clamp(22px, 4.4vw, 29px); line-height: 1.3;
	color: #DED5BE; max-width: 26ch;
}

/* ── Result ───────────────────────────────────────────────────── */
.aiq-result {
	width: 100%; max-width: 470px; display: flex; flex-direction: column;
	align-items: center; text-align: center; padding: 44px 22px 52px;
}
.aiq-result-logo { height: 24px; margin-bottom: 30px; opacity: .92; }

.aiq-gauge { position: relative; width: 230px; height: 128px; }
.aiq-gauge-svg { overflow: visible; display: block; }
.aiq-gauge-track { fill: none; stroke: rgba(222,213,190,.13); stroke-width: 12; stroke-linecap: round; }
.aiq-gauge-value {
	fill: none; stroke: url(#mzGaugeGrad); stroke-width: 12; stroke-linecap: round;
	stroke-dasharray: 282.8; stroke-dashoffset: 282.8;
	transition: stroke-dashoffset 1.35s cubic-bezier(.25,.75,.3,1);
}
.aiq-gauge-readout {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.aiq-gauge-score { font-size: 46px; font-weight: 700; color: #DED5BE; line-height: 1; font-variant-numeric: tabular-nums; }
.aiq-gauge-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(222,213,190,.5); }

.aiq-tier {
	margin-top: 26px; font-family: 'Playfair Display', serif; font-weight: 600;
	font-size: clamp(30px, 7vw, 40px); line-height: 1.15; color: #DED5BE;
}
.aiq-tier-emoji { font-family: 'DM Sans', sans-serif; }
.aiq-tier-emoji:not(:empty)::after { content: '\00a0'; }
.aiq-tier-name { font-weight: 500; font-style: italic; }
.aiq-verdict {
	margin: 16px 0 0; font-size: 15.5px; line-height: 1.65;
	color: rgba(222,213,190,.85); max-width: 44ch;
}

.aiq-move {
	margin-top: 28px; width: 100%; box-sizing: border-box; text-align: left;
	border-radius: 16px; padding: 26px 26px 24px;
	background: linear-gradient(135deg, rgba(222,213,190,.10), rgba(255,255,255,.03));
	border: 1px solid rgba(222,213,190,.14);
	border-top-color: rgba(222,213,190,.34); border-left-color: rgba(222,213,190,.24);
	box-shadow: 0 8px 32px rgba(0,0,0,.45);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.aiq-move-eyebrow {
	display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: #E8440A; margin-bottom: 10px;
}
.aiq-move-eyebrow .aiq-eyebrow-rule { width: 18px; }
.aiq-move-text { font-size: 15px; line-height: 1.6; color: rgba(222,213,190,.92); }
.aiq-move-note { margin-top: 10px; font-size: 12px; color: rgba(222,213,190,.45); }

.aiq-bench { margin-top: 16px; font-size: 12.5px; letter-spacing: .4px; color: rgba(222,213,190,.5); }
.aiq-share { margin-top: 22px; width: 100%; font-size: 15px; padding: 14px 24px; }
.aiq-share:hover { transform: none; }

.aiq-email { margin-top: 24px; width: 100%; text-align: left; }
.aiq-email-eyebrow {
	font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
	color: rgba(222,213,190,.55); margin-bottom: 10px;
}
.aiq-email-row { display: flex; gap: 8px; flex-wrap: wrap; }
.aiq-email-input {
	flex: 1; min-width: 180px; box-sizing: border-box; border-radius: 8px;
	border: 1px solid rgba(222,213,190,.28); background: rgba(255,255,255,.06);
	color: #DED5BE; font-family: 'DM Sans', sans-serif; font-size: 14.5px;
	padding: 13px 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.aiq-email-input:focus { border-color: #E8440A; box-shadow: 0 0 0 3px rgba(232,68,10,.22); }
.aiq-email-submit {
	white-space: nowrap; font-size: 14px; padding: 13px 16px; box-shadow: none;
}
.aiq-email-submit:hover { transform: translateY(-1px); box-shadow: none; }
.aiq-email-submit:active { transform: translateY(-1px); }
.aiq-email-err { margin-top: 8px; font-size: 12px; color: #E88C8C; }
.aiq-email-help { margin-top: 8px; font-size: 11.5px; color: rgba(222,213,190,.4); }

.aiq-email-ok {
	display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(222,213,190,.9);
	background: rgba(95,189,140,.1); border: 1px solid rgba(95,189,140,.3);
	border-radius: 8px; padding: 13px 14px;
}
.aiq-email-ok-icon { flex: none; filter: drop-shadow(0 0 6px rgba(232,68,10,.5)); }
.aiq-sent-moves { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.aiq-sent-move {
	box-sizing: border-box; text-align: left; border-radius: 14px; padding: 16px 18px;
	background: linear-gradient(135deg, rgba(222,213,190,.08), rgba(255,255,255,.02));
	border: 1px solid rgba(222,213,190,.12);
}
.aiq-sent-move-n { font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #E8440A; margin-bottom: 6px; }
.aiq-sent-move-t { font-size: 13.5px; line-height: 1.55; color: rgba(222,213,190,.88); }
.aiq-sent-note { margin-top: 10px; font-size: 11px; color: rgba(222,213,190,.38); }

.aiq-cta-call {
	margin-top: 22px; width: 100%; box-sizing: border-box; display: block;
	text-align: center; text-decoration: none; border-radius: 8px;
	background: #E8440A; color: #FFFFFF; font-size: 15.5px; font-weight: 600; padding: 15px 24px;
	box-shadow: 0 6px 22px rgba(232,68,10,.35); transition: transform .18s ease, box-shadow .18s ease;
}
.aiq-cta-call:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232,68,10,.48); color: #FFFFFF; }
.aiq-cta-spicy {
	margin-top: 22px; font-size: 13.5px; color: rgba(222,213,190,.7);
	text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease;
}
.aiq-cta-spicy:hover { color: #E8440A; }
.aiq-cta-fine { margin-top: 22px; font-size: 12.5px; color: rgba(222,213,190,.45); }

.aiq-result-cred { margin-top: 24px; font-size: 11.5px; max-width: 42ch; color: rgba(222,213,190,.35); }
.aiq-play-again {
	margin-top: 20px; cursor: pointer; background: none; border: none;
	color: rgba(222,213,190,.6); font-family: 'DM Sans', sans-serif; font-size: 13.5px;
	text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease;
}
.aiq-play-again:hover { color: #E8440A; }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}