/*
 * Sierra Collective — Onboarding quiz page styles
 */

.page { max-width: 760px; margin: 0 auto; padding: 56px 48px 96px; }

.form-section { margin-bottom: 48px; }

.btn-primary:disabled { opacity: 0.4; cursor: default; }

.question { margin-bottom: 32px; }
.question-label { font-size: 15px; font-weight: 500; margin-bottom: 16px; color: var(--text); }
.question-label .note { font-size: 12px; font-weight: 300; color: var(--muted); }

.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }

.choice-group label {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--border2); background: var(--bg2);
  cursor: crosshair; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: all 0.15s; user-select: none; border-radius: 1px;
}

.choice-group input { accent-color: var(--amber); cursor: crosshair; }

.choice-group label:has(input:checked) {
  border-color: var(--amber-dim);
  background: rgba(200,134,46,0.08);
  color: var(--amber);
}

.choice-group label:hover { border-color: var(--amber-dim); }

.actions { display: flex; align-items: center; gap: 16px; padding-top: 8px; }

@media (max-width: 600px) { .page { padding: 36px 24px 64px; } }