/* =============================================================================
   FORJA: Onboarding (telas/onboarding.js)
   -----------------------------------------------------------------------------
   Só o que o forja.css não tem: o cartão de opção selecionado (spec 03 §6.3,
   véu magenta→violeta + anel externo + selo), a grade de 7 chips, os chips
   com quebra de linha, o rótulo visível de campo, o painel de etapas da IA e
   os ajustes de espaçamento medidos na spec 03 §2.1. Tudo em token; nenhum
   hex solto. Prefixo `ob-`.
   ============================================================================= */

/* --- Moldura ---------------------------------------------------------------- */

/* Sem tab bar no onboarding: não reserva os 60px dela no fim da rolagem. */
.ob-rolagem { padding-bottom: var(--fj-e-8); }

/* Header → barra: 22px (spec 03). O .fj-cabecalho já tem 12px de padding. */
.ob-segbar { margin-block-start: var(--fj-e-5); }

/* H1 de onboarding: 32px, duas linhas forçadas, line-height 1,08 (spec 03 §4). */
.ob-titulo {
  margin-block-start: var(--fj-e-12);
  font-size: var(--fj-fs-6xl);
  line-height: 1.08;
}

.ob-sub {
  margin-block-start: var(--fj-e-3);
  font-size: var(--fj-fs-lg);
  line-height: 20px;
  color: var(--fj-txt-3);
}

.ob-passo {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-11);
  margin-block-start: var(--fj-e-12);
  transition: opacity var(--fj-dur-rapida) var(--fj-ease-saida);
}

/* Carregando o estado do servidor: os cartões já aparecem, apagados, sem
   esqueleto (spec 03 §8). Salvando: mesma coisa, e nada responde ao toque. */
.ob-tela[aria-busy="true"] .ob-passo,
.ob-passo.is-ocupado {
  opacity: .5;
  pointer-events: none;
}

.ob-form {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-11);
}

.ob-grupo { display: flex; flex-direction: column; gap: var(--fj-e-4); }
.ob-grupo--triagem { gap: var(--fj-e-6); margin-block-start: var(--fj-e-4); }
.ob-grupo--triagem .ob-grupo { margin-block-start: var(--fj-e-4); }

/* --- Rodapé: faixa de erro em cima do botão ---------------------------------- */

.ob-rodape {
  flex-direction: column;
  align-items: stretch;
  gap: var(--fj-e-5);
}

.ob-cta svg { inline-size: 16px; block-size: 16px; }

/* --- Faixas com texto longo ----------------------------------------------- */

.ob-faixa {
  align-items: flex-start;
  border-radius: var(--fj-r-lg);
  font-weight: var(--fj-w-medio);
  line-height: var(--fj-lh-normal);
}

.ob-faixa svg { margin-block-start: 1px; }

/* --- Campo com rótulo visível ---------------------------------------------- */

.ob-campo { display: flex; flex-direction: column; }

.ob-rotulo {
  display: block;
  margin: 0 0 var(--fj-e-3);
  font-size: var(--fj-fs-sm);
  font-weight: var(--fj-w-semi);
  line-height: var(--fj-lh-normal);
  color: var(--fj-txt-2);
}

.ob-dica {
  margin: var(--fj-e-3) 0 0;
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-normal);
  color: var(--fj-txt-3);
}

.ob-dica--acima { margin: 0 0 var(--fj-e-3); }

.ob-unidade { flex: none; }

.ob-grade-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fj-e-6);
}

/* O <input> tem largura intrínseca (~20ch) e o item de grid nasce com
   min-width auto: sem isto a coluna do peso estoura o gutter. */
.ob-grade-2 > *,
.ob-campo .fj-campo { min-inline-size: 0; }

/* Campo "outro" dos chips: o botão + já é o .fj-campo__acao de 44px. */
.ob-campo-outro { margin-block-start: var(--fj-e-2); }

.ob-texto-livre { min-block-size: 104px; color: var(--fj-txt-1); }

/* --- Sexo (segmented de 2): a pílula parte da borda interna --------------- */

.ob-segmented .fj-segmented__pilula { inset-inline-start: 5px; }

/* --- Dias por semana: 7 chips iguais ----------------------------------------- */

.ob-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--fj-e-3);
}

.ob-dias .fj-chip {
  inline-size: 100%;
  min-inline-size: 0;
  padding-inline: 0;
  font-family: var(--fj-fonte-num);
  font-variant-numeric: tabular-nums;
}

/* --- Chips com quebra (alergias, restrições, lesões) ------------------------- */

.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fj-e-4) var(--fj-e-4);
}

/* Chip de 32px em fileiras: o alvo de 44 do ::after invadiria a fileira de
   cima; com 12px de folga vertical (gap 8 + 4) os alvos não se sobrepõem. */
.ob-chips .fj-chip { margin-block: var(--fj-e-1); }

/* --- Cartão de opção (spec 03 §6.3) sobre o .fj-item ----------------------- */

.ob-opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-6);
}

.ob-opcao {
  min-block-size: 80px;
  padding: var(--fj-e-8);
  gap: var(--fj-e-8);
  border-radius: var(--fj-r-2xl);
}

.ob-opcao .fj-item__titulo { font-size: var(--fj-fs-lg); }

/* O selo só existe no escolhido. */
.ob-opcao__selo { display: none; }

/* Selecionado: véu magenta→violeta (direção inversa ao CTA), anel de 2px por
   FORA (box-shadow, não border: o conteúdo não se mexe), selo lima com ✓. */
.ob-opcao[aria-checked="true"] {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fj-magenta) 20%, transparent),
    color-mix(in srgb, var(--fj-violeta) 18%, transparent));
  border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fj-magenta) 70%, transparent);
}

.ob-opcao[aria-checked="true"] .ob-opcao__selo { display: grid; }

/* O anel de foco precisa vencer o anel de seleção. */
.ob-opcao:focus-visible {
  outline: var(--fj-foco-largura) solid var(--fj-foco);
  outline-offset: 4px;
}

/* --- Linhas de lista com texto longo (triagem, cardápio) -------------------- */

.ob-triagem .fj-linha { cursor: pointer; }

.ob-triagem .fj-linha__titulo {
  white-space: normal;
  font-size: var(--fj-fs-lg);
  font-weight: var(--fj-w-semi);
  line-height: var(--fj-lh-normal);
}

.ob-linha-switch { cursor: pointer; }
.ob-linha-switch .fj-linha__titulo { font-size: var(--fj-fs-xl); }

.ob-pronto .fj-linha__titulo { font-size: var(--fj-fs-xl); }
.ob-pronto .fj-linha__sub { white-space: normal; }
.ob-pronto .fj-linha__fim .fj-num { font-size: var(--fj-fs-md); }

/* --- Painel "o que a IA está fazendo" --------------------------------------- */

.ob-progresso {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-6);
  margin-block-start: var(--fj-e-12);
}

.ob-progresso__lista {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-progresso__item {
  display: flex;
  align-items: center;
  gap: var(--fj-e-6);
  min-block-size: 28px;
  font-size: var(--fj-fs-lg);
  line-height: var(--fj-lh-normal);
  color: var(--fj-txt-3);
  transition: color var(--fj-dur-rapida) var(--fj-ease-saida);
}

.ob-progresso__item[data-estado="atual"] { color: var(--fj-txt-1); font-weight: var(--fj-w-semi); }
.ob-progresso__item[data-estado="feito"] { color: var(--fj-txt-2); }

.ob-progresso__marca {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  border: 2px solid var(--fj-borda-forte);
  color: var(--fj-txt-inverso);
}

/* Em andamento: o anel gira. É leitura de estado, então continua girando
   com prefers-reduced-motion, só mais devagar (mesma regra do spinner do
   botão no forja.css). */
.ob-progresso__item[data-estado="atual"] .ob-progresso__marca {
  border-color: color-mix(in srgb, var(--fj-magenta) 30%, transparent);
  border-top-color: var(--fj-magenta);
  animation: fj-girar .8s linear infinite;
}

.ob-progresso__item[data-estado="feito"] .ob-progresso__marca {
  background: var(--fj-grad-treino);
  border-color: transparent;
}

.ob-progresso__nota {
  margin: 0;
  font-size: var(--fj-fs-sm);
  line-height: var(--fj-lh-normal);
  color: var(--fj-txt-3);
}

@media (prefers-reduced-motion: reduce) {
  .ob-progresso__item[data-estado="atual"] .ob-progresso__marca {
    animation: fj-girar 1.6s linear infinite !important;
  }
}

/* --- Revisão ------------------------------------------------------------------ */

.ob-cartao { display: flex; flex-direction: column; gap: var(--fj-e-5); }
.ob-cartao__texto { margin: 0; color: var(--fj-txt-1); }

.ob-lista-simples {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-energia { display: flex; flex-direction: column; gap: var(--fj-e-5); }

.ob-avisos { display: flex; flex-direction: column; gap: var(--fj-e-4); }

.ob-secao { display: flex; flex-direction: column; }
.ob-secao .fj-secao { margin-block: 0 var(--fj-e-6); }

.ob-refeicao__itens { color: var(--fj-txt-2); }