/* Orvyan — simulação: uma consulta de screening com QSA Reverso (/como-funciona/).
   Réplica do formulário e do resultado reais de app.orvyan.com.br/screening
   (mesmos rótulos, classes de status e o destaque em âmbar do recurso QSA).
   Reaproveita .sd / .sd-stage / .sd-doc / .sd-card / .sd-input / .sd-btn /
   .sd-cursor de signup-demo.css. NÃO é interativo: nada é enviado. */

#qsademo .sd-stage { height: 560px; }
@media (max-width: 700px) { #qsademo .sd-stage { height: 540px; } }

/* --- destaque do recurso QSA: mesmas cores do app real --- */
.qsa-feature {
  margin-top: .9rem;
  padding: .8rem .85rem;
  border: 1px solid #d9bd7d;
  border-left: 4px solid #b97800;
  border-radius: 7px;
  background: linear-gradient(135deg, #fff8e8, #fffdf7);
}
.qsa-feature .eyebrow {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8f5f00;
}
.qsa-feature h2 { margin: .1rem 0 0; font-size: 1rem; }
.qsa-feature > p.value { margin: .55rem 0; font-size: .85rem; color: #3f4e61; }

.feature-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
  padding: .4rem .6rem;
  border: 1px solid #6687bd;
  border-radius: 5px;
  background: #eef4fc;
  color: var(--accent);
  font-weight: 700;
  font-size: .85rem;
}
.feature-switch.is-selected { background: #d8e6f8; border-color: #416ba8; color: #0d315f; }
.feature-switch .box {
  width: 14px; height: 14px; border: 1px solid #6687bd; border-radius: 3px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1;
}
.feature-switch.is-selected .box { background: #416ba8; color: #fff; border-color: #416ba8; }

.qsa-path { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.qsa-path span {
  padding: .3rem .5rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: .76rem;
}
.qsa-path .risk { border-color: #d98b8b; background: #fdeaea; color: #8b2323; }
.qsa-path b { color: #718096; font-weight: 400; }

.qsa-investigation-options {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid #ead9b4;
}

/* --- toggle "Gerar código para API": mesmo padrão do app real (checkbox
   simples, não um switch) --- */
.qsa-query-heading { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .2rem; }
.qsa-api-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; color: var(--accent); white-space: nowrap;
}
.qsa-checkbox {
  width: 14px; height: 14px; border: 1px solid #99a6ba; border-radius: 3px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; line-height: 1; color: #fff;
}
.qsa-api-toggle.is-selected .qsa-checkbox { background: var(--accent); border-color: var(--accent); }
#qsa-sc-apicode .apidemo-term { border-radius: 4px; }
#qsa-sc-apicode .ak-panel { width: min(480px, 92%); }

/* --- escopo da consulta: mesmas cores de app.css --- */
.scope-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .4rem; }
.scope-option {
  display: flex; align-items: flex-start; gap: .5rem; min-height: 70px;
  padding: .7rem; border: 1px solid #ccd4df; border-radius: 7px; background: #fff;
}
.scope-option.is-selected { border-color: var(--accent); background: #f2f6fd; box-shadow: 0 0 0 1px var(--accent); }
.scope-option .dot { width: 14px; height: 14px; margin-top: .15rem; border: 1px solid #99a6ba; border-radius: 50%; flex: 0 0 auto; }
.scope-option.is-selected .dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 40%, transparent 44%); }
.scope-option strong { display: block; color: var(--header); }
.scope-option small { display: block; margin-top: .2rem; color: #596575; line-height: 1.35; font-size: .8rem; }

@media (max-width: 700px) { .scope-presets { grid-template-columns: 1fr; } }

/* --- resultado: badges/status, mesmas cores de app.css --- */
.qsa .badge, #qsademo .badge {
  display: inline-block; font-size: .72rem; padding: .1rem .5rem; border-radius: 10px;
  background: #eee; vertical-align: middle;
}
.qsa .status, #qsademo .status {
  font-size: .75rem; padding: .1rem .5rem; border-radius: 10px; background: #eee; white-space: nowrap;
}
#qsademo .status.CLEAR { background: #d4edda; color: #155724; }
#qsademo .status.HIGH { background: #f8d7da; color: #721c24; }

.qsa-visual { display: none; }

.qsa-result-name { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.qsa-result-line { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.qsa-result-note { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); }

.qsa-block {
  margin-top: .8rem;
  opacity: 0;
  transform: translateY(3px);
  animation: qsa-in .3s ease-out forwards;
}
.qsa-block h3 { margin: 0 0 .4rem; font-size: .9rem; }
.qsa-summary { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .6rem; }

.qsa-card-list { display: grid; gap: .5rem; }
.qsa-card {
  border: 1px solid #eee; border-radius: 4px; padding: .5rem .65rem; background: #fff;
  opacity: 0; transform: translateY(3px); animation: qsa-in .3s ease-out forwards;
}
.qsa-card.lvl-3 { border-left: 3px solid #f0c4c4; }
.qsa-card-title { font-weight: 700; font-size: .88rem; }
.qsa-card-meta { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.qsa-card-line { margin-top: .3rem; font-size: .8rem; color: var(--muted); }

@keyframes qsa-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .qsa-block, .qsa-card { animation: none; opacity: 1; transform: none; }
}