/* Onboarding quiz overlay (views/quiz.ts), rendered on /for-you. Full screen
   on phones, a centered card from tablet up. */

.quiz-overlay {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-scrim); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.quiz-card { position: relative; width: 100%; min-height: 100%; padding: var(--space-6) var(--gutter) var(--space-5); background: var(--color-surface); }
.quiz-x { position: absolute; top: var(--space-2); right: var(--space-2); }

.quiz-mark { color: var(--color-accent); }
.quiz-h { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-lg); line-height: 1.2; }
.quiz-sub { max-width: 46ch; margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }

.quiz-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
.quiz-actions--between { justify-content: space-between; align-items: center; }
.quiz-actions--between #quiz-next { margin-left: auto; }

.quiz-progress { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-4); }
.quiz-dots { display: flex; gap: var(--space-2); }
.quiz-dot { width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--color-line); transition: background var(--dur-fast) ease; }
.quiz-dot.is-current { background: var(--color-accent); }
.quiz-dot.is-done { background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface)); }
.quiz-count { font-size: var(--text-xs); color: var(--color-ink-mute); }

/* Dual-range control (budget / size / age) */
.rng { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-2) var(--space-1) 0; }
.rng-track { position: relative; height: 1.625rem; }
.rng-track::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
    border-radius: var(--radius-sm); background: var(--color-line);
}
.rng-fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); border-radius: var(--radius-sm); background: var(--color-accent); }
.rng input[type=range] {
    position: absolute; left: 0; top: 0; width: 100%; height: 1.625rem; margin: 0;
    -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.rng input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.rng input[type=range]::-moz-range-track { background: none; border: none; }
.rng input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; cursor: pointer; pointer-events: auto;
    border: 1px solid var(--color-line-strong); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-2);
}
.rng input[type=range]::-moz-range-thumb {
    width: 1.5rem; height: 1.5rem; cursor: pointer; pointer-events: auto;
    border: 1px solid var(--color-line-strong); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-2);
}
.rng .range { align-items: flex-end; }
.rng-label, .quiz-field-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-soft); }
.rng-dash { padding-bottom: var(--space-3); }
.quiz-subfield + .quiz-subfield { margin-top: var(--space-5); }

/* Cities */
.quiz-counties { display: flex; flex-direction: column; gap: var(--space-4); max-height: 20rem; overflow-y: auto; padding-right: var(--space-1); }
.quiz-county-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-2); }
.quiz-county-name { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-soft); }
.quiz-city-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quiz-city-summary { min-height: 1.4em; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-ink-mute); }

/* Places */
.quiz-place-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.quiz-place-label { flex: 1 1 8rem; width: auto; }
.quiz-place-search { flex: 3 1 14rem; }
.quiz-place-status { min-height: 1.1em; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-mute); }
.quiz-place-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.quiz-place-card {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--color-surface-2);
    border: 1px solid var(--color-line-soft); border-radius: var(--radius-md);
}
.quiz-place-name { font-size: var(--text-sm); font-weight: 600; }
.quiz-place-addr { margin-top: 2px; font-size: var(--text-xs); color: var(--color-ink-soft); }

@media (min-width: 40em) {
    .quiz-overlay { padding: 6vh var(--space-4); }
    .quiz-card {
        max-width: 35rem; min-height: 0; margin: auto; padding: var(--space-6) var(--space-6) var(--space-5);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
    }
    .quiz-h { font-size: var(--text-xl); }
}