/* Conjoin · Acesso, cadastro, Público Atípico e estados comuns no padrão da prancha
   (carregado depois de ref.css). */

/* ===== Pergunta por tela ===== */
.question { gap: var(--s-6); padding-top: var(--s-3); }
.question-head { gap: var(--s-2); }
.question-head h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.015em; color: var(--azul); }
.question-head p { color: var(--ink-soft); }
.question-head .q-kicker { font-size: var(--fs-label); font-weight: 600; color: var(--ouro-tinta); }
.topbar-progress .progress-track { height: 6px; }
.topbar-progress .progress-head strong { color: var(--porto); font-weight: 600; }

/* Opções grandes: ícone em círculo dourado claro, seleção em ouro */
.choice { min-height: 68px; border-color: var(--line); box-shadow: var(--shadow-whisper); }
.choice .choice-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ouro-veu); color: var(--ouro-tinta); }
.choice:hover { border-color: var(--mare); }
.choice:has(input:checked), .choice[aria-checked="true"], .choice[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-veu); }
.choice:has(input:checked) .choice-icon { background: var(--ouro); color: var(--noite); }
.choice:has(input:checked) .choice-mark, .choice[aria-checked="true"] .choice-mark, .choice[aria-pressed="true"] .choice-mark { border-color: var(--ouro); background: var(--ouro); color: var(--noite); }
.choice:has(input:checked) { animation: glow 600ms var(--ease-out) 1; }
.check input:checked { background-color: var(--ouro); border-color: var(--ouro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101C26' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.check { min-height: 52px; }
.check .check-text { font-weight: 500; }

/* Lista "o que vamos pedir" (17) e itens de resumo */
.onb-intro-list { gap: var(--s-2); }
.onb-intro-item { gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-whisper); }
.onb-intro-item .lr-icon { border-radius: 50%; background: var(--ouro-veu); color: var(--ouro-tinta); }

/* Nota de demonstração mais discreta, no fim da tela */
.question .demo-note, .stack-lg .demo-note, .hero-state .demo-note { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); font-size: 0.8125rem; line-height: 1.15rem; border-width: 1px; }
.demo-note .demo-code { font-size: 1.375rem; letter-spacing: 0.22em; }

/* ===== Estados e confirmações (ícone grande em círculo dourado claro) ===== */
.hero-state { gap: var(--s-3); padding: var(--s-8) var(--s-2) var(--s-4); }
.hero-state .empty-art { width: 112px; height: 112px; background: var(--ouro-veu); color: var(--ouro-tinta); margin-bottom: var(--s-2); }
.hero-state .empty-art .ic { width: 52px; height: 52px; stroke-width: 1.5; }
.hero-state .empty-art.is-ok { background: var(--sucesso-veu); color: var(--sucesso-tinta); }
.hero-state .empty-art.is-erro { background: var(--erro-veu); color: var(--erro-tinta); }
.hero-state .empty-art.is-agua { background: var(--agua-veu); color: var(--agua-tinta); }
.hero-state .empty-art.is-azul { background: var(--azul-veu); color: var(--azul); }
.hero-state h1, .hero-state h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.015em; }
.hero-state p { color: var(--porto); }
.hero-state .notice, .hero-state .demo-note, .hero-state .card { width: 100%; text-align: left; }
.hero-state .kbd-code { font-size: 2.75rem; line-height: 1.1; }
.hero-state .tag { align-self: center; }

/* Estados comuns (166–171): ilustração com anel */
.state-art { position: relative; display: grid; place-items: center; width: 136px; height: 136px; margin: var(--s-2) auto; border-radius: 50%; background: var(--ouro-veu); color: var(--ouro-tinta); }
.state-art::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px dashed var(--ouro); opacity: 0.45; animation: state-spin 24s linear infinite; }
.state-art .ic { width: 60px; height: 60px; stroke-width: 1.5; }
.state-art.is-erro { background: var(--erro-veu); color: var(--erro-tinta); }
.state-art.is-erro::before { border-color: var(--erro); }
.state-art.is-azul { background: var(--azul-veu); color: var(--azul); }
.state-art.is-azul::before { border-color: var(--azul); }
.state-code { align-self: center; padding: 6px 14px; border-radius: var(--r-pill); background: var(--bruma); color: var(--porto); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.state-loading { display: flex; flex-direction: column; gap: var(--s-4); }
.state-loading .sk-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.state-loading .sk-tile { height: 96px; border-radius: var(--r-xl); }
@keyframes state-spin { to { transform: rotate(360deg); } }

/* Código de 6 dígitos */
.otp { gap: var(--s-2); }
.otp input { border-radius: var(--r-lg); min-height: 60px; font-size: 1.75rem; box-shadow: var(--shadow-whisper); }
.otp input:focus-visible { border-color: var(--ouro); box-shadow: 0 0 0 2px var(--alva), 0 0 0 4px var(--ouro); }
.resend-wait { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: var(--fs-label); }

/* Biometria: círculo dourado com a digital */
.bio-art { background: var(--ouro-veu); color: var(--ouro-tinta); box-shadow: 0 0 0 10px rgba(198, 147, 46, 0.14); }
.bio-btn { background: var(--ouro); color: var(--noite); box-shadow: 0 0 0 10px var(--ouro-veu), 0 12px 28px rgba(198, 147, 46, 0.35); animation: glow 2.4s ease-in-out infinite; }
.bio-login .t-title-lg { font-weight: 800; }

/* Canais e provedores */
.providers { display: flex; gap: var(--s-2); }
.providers .btn { flex: 1; padding-inline: var(--s-3); }
.divider-label { margin: calc(var(--s-2) * -1) 0; }

/* Contato principal confirmado (21) */
.contact-ok { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--sucesso-veu); }
.contact-ok .ps-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sucesso); color: var(--alva); }
.contact-ok .ps-ic .ic { width: 18px; height: 18px; stroke-width: 2.8; }

/* Progresso do cadastro (24) */
.set-row .tag { align-self: center; }
.set-row.is-done .sr-ic { background: var(--sucesso-veu); color: var(--sucesso-tinta); }

/* Faixa de salário e distância */
.big-value { font-size: 1.75rem; line-height: 2.25rem; }
.stepper .icon-btn { border-color: var(--ouro); color: var(--ouro-tinta); background: var(--alva); }
.stepper .icon-btn:hover { background: var(--ouro-veu); }
.range { accent-color: var(--ouro); }

/* Foto (38) */
.photo-drop { border-color: var(--ouro); background: var(--ouro-veu); color: var(--ouro-tinta); }

/* Público Atípico */
.atyp-points { display: flex; flex-direction: column; gap: var(--s-2); }
.atyp-points .point { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-whisper); }
.atyp-points .point .pt-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--agua-veu); color: var(--agua-tinta); }
.atyp-points .point .pt-ic .ic { width: 18px; height: 18px; }
.term-box { padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-whisper); }
.term-box p + p { margin-top: var(--s-2); }
.vis-item { gap: var(--s-2); }
.vis-item .chips .chip { flex: 1 1 auto; justify-content: center; }
.atyp-review .feature { border: 0; text-align: left; font: inherit; cursor: pointer; width: 100%; }
.atyp-review .tile { min-height: 120px; }

/* ===== Telas estreitas ===== */
@media (max-width: 359px) {
  .otp { gap: 6px; }
  .otp input { min-height: 52px; font-size: 1.375rem; border-radius: var(--r-md); }
  .question-head h2 { font-size: 1.375rem; line-height: 1.75rem; }
  .hero-state h1, .hero-state h2 { font-size: 1.375rem; line-height: 1.75rem; }
  .hero-state .empty-art { width: 96px; height: 96px; }
  .state-art { width: 116px; height: 116px; }
  .providers { flex-direction: column; }
  .bento .field, .bento > * { min-width: 0; }
  .days .chip { font-size: 0.75rem; padding: 0; }
  .photo-drop { width: 132px; height: 132px; }
  .photo-drop .avatar { --av: 128px; }
  .vis-item .chips .chip { flex-basis: 100%; }
  .atyp-review .bento { grid-template-columns: 1fr; }
}

/* Jornada (32): períodos e escalas em largura total, sem espremer */
.question .bento > fieldset { grid-column: 1 / -1; }
.question .bento > fieldset .stack-xs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 var(--s-3); }