/* reflection.css — guided reflection tool (replaces quiz.css).
   No scores, no profile boxes: the result is plain prose. */
.refl-page { padding: clamp(7rem, 5rem + 8vw, 10rem) 0 clamp(4rem, 3rem + 5vw, 7rem); min-height: 100dvh; }
.refl-meta { margin-top: 1.5rem; font-size: var(--step--1); color: hsl(var(--text-faint)); letter-spacing: .02em; }

/* progress */
.refl-progress { height: 5px; border-radius: var(--r-pill); background: hsl(var(--border)); overflow: hidden; margin-bottom: 1.5rem; }
.refl-progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); transition: width var(--dur) var(--ease-out); }
.refl-step-label { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: hsl(var(--accent-deep)); margin-bottom: 1.5rem; min-height: 1.2em; }

/* question */
.refl-q-title { font-size: var(--step-2); margin-bottom: .5rem; }
.refl-q-hint { font-size: var(--step--1); color: hsl(var(--text-faint)); margin-bottom: 1.25rem; }
.refl-options { display: grid; gap: .75rem; }
.refl-option { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1.1rem 1.25rem; border: 1.5px solid hsl(var(--border-strong)); border-radius: var(--r-md); background: hsl(var(--surface)); font-weight: 500; color: hsl(var(--text)); transition: all var(--dur-fast) var(--ease-out); }
.refl-option:hover { border-color: hsl(var(--primary) / .6); background: hsl(var(--primary) / .04); transform: translateX(3px); }
.refl-option:active { transform: translateX(3px) scale(.99); }
.refl-option.selected { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .08); }

/* single choice — round marker */
.refl-option-dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid hsl(var(--border-strong)); flex-shrink: 0; transition: all var(--dur-fast) var(--ease-out); }
.refl-option.selected .refl-option-dot { border-color: hsl(var(--primary)); background: hsl(var(--primary)); box-shadow: inset 0 0 0 3px hsl(var(--surface)); }

/* multiple choice — square marker with a check */
.refl-option-box { width: 1.15rem; height: 1.15rem; border-radius: 5px; border: 2px solid hsl(var(--border-strong)); flex-shrink: 0; transition: all var(--dur-fast) var(--ease-out); background-repeat: no-repeat; background-position: center; background-size: .7rem; }
.refl-option.selected .refl-option-box { border-color: hsl(var(--primary)); background-color: hsl(var(--primary));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfbf7' stroke-width='3.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }

/* free-text field behind the "Other" option */
.refl-other { margin-top: .75rem; }
.refl-other input { width: 100%; padding: .9rem 1.1rem; border: 1.5px solid hsl(var(--border-strong)); border-radius: var(--r-md); background: hsl(var(--surface)); font: inherit; }
.refl-other input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); }

.refl-forward { margin-top: 1.5rem; }
.refl-nav { margin-top: 1.5rem; }

/* email step */
.refl-email { text-align: center; max-width: 34rem; margin-inline: auto; }
.refl-email h2 { font-size: var(--step-3); }
.refl-email-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.refl-email-form input { flex: 1 1 14rem; padding: .9rem 1.1rem; border: 1.5px solid hsl(var(--border-strong)); border-radius: var(--r-md); background: hsl(var(--surface)); font: inherit; }
.refl-email-form input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); }
.refl-priv { font-size: var(--step--1); color: hsl(var(--text-faint)); margin-top: 1rem; }

/* the reflection itself */
.refl-result { max-width: 42rem; margin-inline: auto; }
.refl-result .eyebrow { text-align: center; }
.refl-result-body p { color: hsl(var(--text-soft)); font-size: var(--step-0); line-height: 1.75; }
.refl-result-body p + p { margin-top: 1rem; }
.refl-result-cta { text-align: center; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); }
.refl-result-cta h3 { font-size: var(--step-2); color: hsl(var(--primary-deep)); }
.refl-result-cta p { color: hsl(var(--text-soft)); margin-inline: auto; max-width: 34rem; }

@media (hover: none) { .refl-option:hover { transform: none; } }