/* ===========================================================================
   mapa-quiz.css — estilos do runner de quiz, compartilhados pelos territórios.
   ---------------------------------------------------------------------------
   Levantado VERBATIM das 8 páginas de teste, que carregavam cópias idênticas
   destas regras. Única divergência encontrada entre elas: o DISC tinha
   `border-radius:10px` no botão da escala contra 11px nas outras 7 — deriva de
   copiar-colar, consolidada em 11px.

   Depende de custom properties definidas POR PÁGINA (cada território tem a sua
   cor): --sans --serif --mono --ink --line --line-soft --terr --green --accent
   --ease. Não redefina nada disso aqui, ou os territórios perdem a identidade.

   Os nomes de classe são contrato: o `@media print` de cada página esconde
   `.quiz-modal` e `.q-nav` por classe. Renomear aqui quebra a impressão lá.
   =========================================================================== */

/* ---------- caixa do quiz ---------- */
.quiz{background:rgba(255,250,238,.86);backdrop-filter:blur(6px);border:1px solid var(--line-soft);border-radius:20px;padding:30px;margin:24px 0;box-shadow:0 18px 50px -28px rgba(26,31,46,.35)}
.q-lead{font-family:var(--mono);font-size:.82rem;opacity:.6;margin:0 0 6px}
.progress{height:6px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-bottom:18px}
.progress>i{display:block;height:100%;width:0;background:var(--terr);transition:width .3s}
.q-count{font-family:var(--mono);font-size:.85rem;color:var(--accent);margin-bottom:6px}
.q-text{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.22;margin:6px 0 20px;min-height:2em}

/* ---------- escala Likert ---------- */
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-text.qin{animation:qin .34s var(--ease)}
.scale.qin button{animation:qin .34s var(--ease) backwards}
.scale.qin button:nth-child(1){animation-delay:.02s}
.scale.qin button:nth-child(2){animation-delay:.06s}
.scale.qin button:nth-child(3){animation-delay:.1s}
.scale.qin button:nth-child(4){animation-delay:.14s}
.scale.qin button:nth-child(5){animation-delay:.18s}
.scale{display:flex;flex-direction:column;gap:8px}
.scale button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line-soft);border-radius:11px;padding:15px 18px;font-family:var(--sans);font-size:1.08rem;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.scale button:hover{border-color:var(--terr);background:rgba(31,107,110,.06);transform:translateX(3px)}
.scale button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.scale button .kbd{margin-left:auto;font-family:var(--mono);font-size:.72rem;opacity:.35;border:1px solid var(--line-soft);border-radius:5px;padding:1px 6px}
.scale button.sel{border-color:var(--terr);background:rgba(31,107,110,.1)}
.scale button.sel .dot{border-color:var(--terr);background:var(--terr);box-shadow:inset 0 0 0 2px #fff}
.scale .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;transition:.15s}

/* ---------- navegação ---------- */
.q-nav{display:flex;justify-content:space-between;margin-top:18px}
.q-nav button{background:none;border:none;color:var(--ink);opacity:.6;cursor:pointer;font-family:var(--sans);font-size:.95rem}
.q-nav button:hover{opacity:1;color:var(--accent)}
.q-nav button[disabled]{visibility:hidden}

/* ---------- modal ---------- */
.quiz-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(26,31,46,.6);backdrop-filter:blur(5px)}
.quiz-modal.open{display:flex;animation:mfade .25s var(--ease)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.quiz-modal-inner{position:relative;width:100%;max-width:660px;max-height:94vh;overflow:auto;animation:mpop .3s var(--ease)}
@keyframes mpop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.quiz-modal .quiz{margin:0;padding:34px 36px}
@media(max-width:560px){.quiz-modal .quiz{padding:24px 18px}}
.quiz-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.quiz-head .qh-sym{flex:none;width:30px;height:30px;color:var(--terr)}
.quiz-head .qh-sym svg{width:100%;height:100%}
.quiz-head .qh-title{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terr);font-weight:600}
.quiz-head .quiz-close{margin-left:auto}
.quiz-close{background:none;border:1.5px solid var(--line-soft);border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:.15s}
.quiz-close:hover{border-color:var(--accent);color:var(--accent)}
.quiz-close svg{width:18px;height:18px}

/* ===========================================================================
   ACRESCENTADO PELO MOTOR — nada disso muda o desenho.
   =========================================================================== */

/* Texto só para leitor de tela: anuncia a pergunta e o progresso. Sem isso, a
   escala Likert é lida como cinco botões soltos, sem grupo, sem estado e sem
   aviso de que a pergunta trocou. */
.mq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Foco visível também para quem chega pelo teclado no botão fechar e no voltar.
   O projeto exige foco visível no seu próprio Definition of Done. */
.quiz-close:focus-visible,.q-nav button:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* Item pendente e resultado parcial (tarefa Q01). Os dois são texto do motor,
   não da página, e nascem escondidos: sem omissão, nenhum dos dois existe na
   tela. Cor de território e não de erro — a pessoa não errou nada, ela ainda
   não respondeu, e vermelho aqui transformaria informação em bronca. */
.mq-pendente{font-family:var(--sans);font-size:.95rem;line-height:1.45;color:var(--terr);
  border-left:2px solid var(--terr);padding-left:12px;margin-bottom:14px}
.mq-cobertura{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--ink);
  opacity:.8;border:1px solid var(--line-soft);border-radius:11px;padding:15px 18px;margin-bottom:18px}
.mq-pendente[hidden],.mq-cobertura[hidden]{display:none}

/* Respeita quem pediu menos movimento no sistema. As animações de entrada da
   pergunta viram troca instantânea; nada de conteúdo se perde. */
@media (prefers-reduced-motion:reduce){
  .q-text.qin,.scale.qin button{animation:none}
  .quiz-modal.open,.quiz-modal-inner{animation:none}
  .progress>i{transition:none}
  .scale button{transition:none}
  .scale button:hover{transform:none}
}