/* ============================================================
   Telas de pergunta (single-choice)
   Medidas de OnboardingD0GoalViewController + OnboardingD0OptionCell:
   título 32 bold a 92pt do topo · subtítulo 18 · opções 28 abaixo,
   12 de espaço · cartão raio 16, padding 20, título 16/semibold,
   descrição 13 · selecionado: fundo accent 8% e borda 2px.
   ============================================================ */

:root {
  --opt-bg: #2c2c2e;          /* .tertiarySystemGroupedBackground no escuro */
  --opt-bg-on: rgba(255, 126, 30, .08);
}

/* Tela de pergunta sem rodapé fixo: ela mesma é a área de rolagem. */
.pergunta {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 28px var(--gutter) 32px;
}
.pergunta::-webkit-scrollbar { display: none; }

.pergunta-titulo {
  margin: 0;
  font-size: 32px; line-height: 1.14; font-weight: 700; letter-spacing: -.025em;
  text-wrap: balance;
}
.pergunta-sub {
  margin: 8px 0 0;
  font-size: 18px; line-height: 1.4; color: var(--ink-2);
}

.pergunta-opts {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 28px;
  list-style: none; padding: 0;
}

.opcao {
  display: block; width: 100%; text-align: left;
  padding: 20px;
  background: var(--opt-bg);
  border: 1px solid var(--opt-bg);
  border-radius: 16px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.opcao.is-pressed { transform: scale(.97); }
.opcao.is-on {
  background: var(--opt-bg-on);
  border-color: var(--brand);
  border-width: 2px;
  padding: 19px;                /* compensa o 1px extra da borda */
}

.opcao-titulo { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.opcao-desc   { display: block; font-size: 13px; font-weight: 400; line-height: 1.35;
                color: var(--ink-2); margin-top: 2px; }

@media (max-height: 700px) {
  .pergunta-titulo { font-size: 28px; }
  .pergunta-opts { gap: 10px; margin-top: 22px; }
  .opcao { padding: 16px 18px; }
  .opcao.is-on { padding: 15px 17px; }
}

/* ---------- grade de tiles (muscleFocus) ----------
   OnboardingD0OptionTileCell + buildGrid(): 2 colunas, 12 de espaço,
   tile com altura mínima 56, padding 16, título 16/semibold à esquerda.
   Item ímpar na última linha fica em meia largura, como no app. */

.pergunta-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.tile {
  display: flex; align-items: center;
  min-height: 56px;
  padding: 16px;
  text-align: left;
  background: var(--opt-bg);
  border: 1px solid var(--opt-bg);
  border-radius: 16px;
  color: var(--ink);
  font: 600 16px/1.3 var(--font);
  cursor: pointer;
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.tile.is-pressed { transform: scale(.97); }
.tile.is-on {
  background: var(--opt-bg-on);
  border-color: var(--brand);
  border-width: 2px;
  padding: 15px;
}

@media (max-height: 700px) {
  .pergunta-grade { gap: 10px; margin-top: 22px; }
  .tile { min-height: 50px; padding: 14px; }
  .tile.is-on { padding: 13px; }
}

/* ---------- lista com caixas de seleção (trainingDays) ----------
   OnboardingD0CheckboxCell: cartão raio 16 altura mínima 56, título
   16/semibold à esquerda, caixa 24x24 redonda com borda 2 à direita.
   Marcado: fundo accent 8%, borda 2, caixa preenchida com o check. */

.pergunta-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

.check {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px;
  padding: 16px 20px;
  background: var(--opt-bg);
  border: 1px solid var(--opt-bg);
  border-radius: 16px;
  color: var(--ink);
  font: 600 16px/1.3 var(--font);
  text-align: left;
  cursor: pointer;
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.check-txt { flex: 1; }
.check.is-pressed { transform: scale(.98); }
.check.is-on {
  background: var(--opt-bg-on);
  border-color: var(--brand);
  border-width: 2px;
  padding: 15px 19px;
}

.check-box {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 2px solid var(--ink-3);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.check.is-on .check-box { background: var(--brand); border-color: var(--brand); }
.check-box svg { width: 14px; height: 14px; opacity: 0; transition: opacity .2s ease; }
.check.is-on .check-box svg { opacity: 1; }

/* grade de múltipla escolha (trainingDays) — mesmo tile do muscleFocus */
.pergunta-grade.e-multipla .tile { justify-content: flex-start; }