/* People · Standards — popup de quiz que aparece a qualquer utilizador com
   um questionário em falta, logo que chega ao hub (desktop ou mobile). Sem
   dependência de people.css / people-mobile.css porque o hub não carrega
   nenhum dos dois — estilos totalmente self-contained. */

.standards-quiz__intro {
  margin: 0 0 var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.standards-quiz__question {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}

.standards-quiz__question:first-child {
  border-top: none;
  padding-top: 0;
}

.standards-quiz__question-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  color: var(--navy-900);
  font-size: var(--fs-base);
}

.standards-quiz__question-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--navy-050);
  color: var(--navy-800);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.standards-quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.standards-quiz__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.standards-quiz__option:hover {
  border-color: var(--navy-500, var(--navy-800));
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}

.standards-quiz__option:has(input:checked) {
  border-color: var(--navy-800);
  background: var(--navy-050);
}

.standards-quiz__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.standards-quiz__option-radio {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.standards-quiz__option-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--white);
  transform: scale(0);
  transition: transform var(--t-fast);
}

.standards-quiz__option:has(input:checked) .standards-quiz__option-radio {
  border-color: var(--navy-800);
  background: var(--navy-800);
}

.standards-quiz__option:has(input:checked) .standards-quiz__option-radio::after {
  transform: scale(1);
}

.standards-quiz__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}

.standards-quiz__result-score {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--navy-800);
  margin: 0 0 var(--sp-2);
}

.standards-quiz__result-hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 34ch;
}

/* ============================================================
   Desktop e mobile — alinhado à direção "liquid glass" já aplicada ao
   resto da app (ver people.css / dashboard.css: mesma receita de
   blur + cores). O hub não carrega essas folhas, por isso os
   valores aqui são replicados em vez de reutilizados via var().
   Tudo scoped a #modal-standards-quiz para não afetar os outros
   modais do hub.
   ============================================================ */
  #modal-standards-quiz .modal__dialog {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.85);
  }

  #modal-standards-quiz .modal__header {
    background: var(--surface-alt);
    border-bottom: 1px solid rgba(60, 60, 67, 0.1);
  }

  #modal-standards-quiz .modal__title { color: #1d1d1f; }
  #modal-standards-quiz .modal__close { color: #6e6e73; }
  #modal-standards-quiz .modal__close:hover {
    background: rgba(120, 120, 128, 0.12);
    color: #1d1d1f;
  }

  #modal-standards-quiz .standards-quiz__intro { color: #6e6e73; }

  #modal-standards-quiz .standards-quiz__question { border-top-color: rgba(60, 60, 67, 0.1); }
  #modal-standards-quiz .standards-quiz__question-title { color: #1d1d1f; }
  #modal-standards-quiz .standards-quiz__question-index {
    background: rgba(10, 132, 255, 0.12);
    color: #0a84ff;
  }

  #modal-standards-quiz .standards-quiz__option {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(60, 60, 67, 0.16);
    color: #1d1d1f;
  }

  #modal-standards-quiz .standards-quiz__option:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: #0a84ff;
    box-shadow: 0 8px 20px -16px rgba(20, 30, 60, 0.25);
  }

  #modal-standards-quiz .standards-quiz__option:has(input:checked) {
    background: rgba(10, 132, 255, 0.1);
    border-color: #0a84ff;
  }

  #modal-standards-quiz .standards-quiz__option-radio { border-color: rgba(60, 60, 67, 0.3); }

  #modal-standards-quiz .standards-quiz__option:has(input:checked) .standards-quiz__option-radio {
    border-color: #0a84ff;
    background: #0a84ff;
  }

  #modal-standards-quiz .standards-quiz__result-score { color: #1d1d1f; }
  #modal-standards-quiz .standards-quiz__result-hint { color: #6e6e73; }

  #modal-standards-quiz .btn--primary {
    border-radius: 999px;
    background: linear-gradient(155deg, #0a84ff, #0060df);
    box-shadow: 0 10px 22px -8px rgba(10, 132, 255, 0.6);
  }

  #modal-standards-quiz .btn--primary:hover {
    background: linear-gradient(155deg, #1a8dff, #0a6ae8);
  }

/* Mobile: diálogo com margens, opções fáceis de tocar e botão a toda a largura. */
@media (max-width: 640px) {
  #modal-standards-quiz .modal__dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    border-radius: 24px;
  }

  #modal-standards-quiz .standards-quiz__option {
    padding: var(--sp-4);
    border-radius: 16px;
  }

  #modal-standards-quiz .modal__footer .btn { width: 100%; justify-content: center; }
}

/* Quiz passo a passo: pergunta única, bolinhas de progresso e ações no rodapé. */
.standards-quiz__intro { margin-bottom: var(--sp-5); }

.standards-quiz__question[hidden] { display: none; }
.standards-quiz__question { padding: 0; border-top: none; }

.standards-quiz__step {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a84ff;
}

.standards-quiz__question-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg, 1.125rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.standards-quiz__footer {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}

.standards-quiz__footer[hidden] { display: none; }

.standards-quiz__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.standards-quiz__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.28);
  transition: width var(--t-fast), background var(--t-fast);
}

.standards-quiz__dot.is-done { background: rgba(10, 132, 255, 0.4); }
.standards-quiz__dot.is-active { width: 22px; background: #0a84ff; }

.standards-quiz__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.standards-quiz__actions .btn { min-width: 120px; justify-content: center; }
.standards-quiz__actions .btn--primary { flex: 1; }

@media (max-width: 640px) {
  #modal-standards-quiz .modal__footer .btn { width: auto; }
  .standards-quiz__actions .btn--primary { flex: 1; }
}