/* ==========================================================================
   Mapa de Padrões — folha do PROJETO.

   Importa o UI Kit, que já traz os tokens junto. Nada aqui redefine cor,
   tipografia ou componente: o que este arquivo faz é LAYOUT — envelope,
   grade e ritmo das telas. Todo valor visual continua vindo de token.

   🔴 Nenhum token é copiado para cá. Projeto importa; nunca duplica.
   ========================================================================== */

@import "ds/componentes.css";

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* O percurso troca de tela por `hidden`. Só que `.eng-tela` e `.ds-botao`
   declaram `display`, e QUALQUER declaração de autor vence a regra `[hidden]`
   da folha do navegador — sem esta linha, as cinco telas ficam empilhadas na
   mesma página e o instrumento inteiro aparece de uma vez. */
[hidden] { display: none !important; }

/* ==========================================================================
   Envelope e ritmo de tela
   ========================================================================== */

.eng-envelope {
  width: 100%;
  max-width: var(--size-container-estreito);
  margin-inline: auto;
  padding-inline: var(--space-layout-gutter);
}

.eng-tela {
  display: grid;
  gap: var(--space-scale-24);
  padding-block: var(--space-scale-48);
}
.eng-tela > * { margin: 0; }

/* Some abaixo de 30rem: ao lado da assinatura, o rótulo estoura a linha e sai
   cortado pela borda. Quem cede é o texto acessório, nunca a marca. */
.eng-chapeu {
  display: none;
  font-weight: var(--type-font-weight-bold);
  letter-spacing: var(--type-letter-spacing-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 30rem) { .eng-chapeu { display: block; } }

.eng-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-scale-16);
  align-items: center;
  margin-top: var(--space-scale-8);
}
/* O botão que segue vem primeiro no DOM em telas largas; em telas estreitas a
   ação principal fica no topo da pilha, onde o polegar chega. */
.eng-acoes .ds-botao { flex: 1 1 auto; }

.eng-dica { margin-top: var(--space-scale-8); }

/* ==========================================================================
   Progresso — dentro do cabeçalho fixo, para haver UM só elemento grudado
   ========================================================================== */

.eng-progresso { padding-bottom: var(--space-scale-16); }

/* ==========================================================================
   Lista editorial de fatos — termo à esquerda, explicação à direita.
   Mesmo padrão do diagnóstico: sem ícone, sem numeral, sem cartão.
   ========================================================================== */

.eng-fatos {
  display: grid;
  gap: 0;
  margin: 0;
}
.eng-fato {
  display: grid;
  gap: var(--space-scale-8);
  padding-block: var(--space-scale-24);
  border-top: var(--border-style-subtle);
}
.eng-fato:last-child { border-bottom: var(--border-style-subtle); }
.eng-fato__termo { color: var(--color-brand-verde); margin: 0; }
.eng-fato :is(p, dd) { margin: 0; max-width: var(--type-measure-body); }

@media (min-width: 48rem) {
  .eng-fato {
    grid-template-columns: var(--type-measure-termo) 1fr;
    gap: var(--space-layout-gap);
    align-items: baseline;
  }
}

/* ==========================================================================
   Triagem — parágrafos longos, um por opção, em coluna única
   --------------------------------------------------------------------------
   `.ds-par` empilha duas alternativas lado a lado; aqui são três blocos de
   texto corrido, e duas colunas espremeriam a leitura abaixo da medida.
   ========================================================================== */

.eng-grupos { display: grid; gap: var(--space-scale-48); }

.eng-paragrafos legend {
  margin-bottom: var(--space-scale-16);
  padding: 0;
}
.eng-paragrafos .ds-opcao label {
  align-items: flex-start;
  padding: var(--space-scale-24);
  line-height: var(--type-line-height-body);
}
.eng-paragrafos .ds-opcao__marca { margin-top: var(--space-scale-4); }

/* Marcação de múltipla escolha é quadrada: a forma diz que dá para marcar
   dois, antes de o texto explicar que dá. */
.eng-marca--quadrada { border-radius: var(--radius-sm); }

.eng-paragrafos__nota {
  margin: var(--space-scale-8) 0 0;
  font-size: var(--type-font-size-sm);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Percurso
   ========================================================================== */

.eng-pergunta {
  margin-bottom: var(--space-scale-32);
  max-width: var(--type-measure-body);
  padding: 0;
}
/* A pergunta e os títulos de etapa recebem foco por script, a cada troca de
   tela, para o leitor de tela anunciar onde a pessoa está. Nenhum usuário de
   teclado chega neles pelo Tab, então o anel é suprimido só neles — não tira
   acessibilidade de ninguém, e evita a moldura que apareceria sem motivo. */
.eng-pergunta:focus, .eng-alvo-de-foco:focus, #conteudo:focus { outline: none; }

/* ==========================================================================
   Resultado
   ========================================================================== */

.eng-resultado { margin-top: var(--space-scale-32); }

.eng-leituras {
  display: grid;
  gap: var(--space-scale-32);
  margin-top: var(--space-scale-16);
}
.eng-leitura p { margin: var(--space-scale-8) 0 0; max-width: var(--type-measure-body); }

@media (min-width: 48rem) {
  .eng-leituras { grid-template-columns: repeat(3, 1fr); gap: var(--space-layout-gap); }
}

/* ---- anel do eneagrama + lista de leitura estrutural ---- */

.eng-mapa { display: grid; gap: var(--space-scale-32); align-items: start; }
.eng-mapa__desenho { justify-self: center; width: 100%; max-width: var(--size-container-texto); }
.eng-mapa__desenho svg { width: 100%; height: auto; display: block; }

.eng-anel__linha  { fill: none; stroke: var(--color-border-subtle); stroke-width: var(--border-width-traco); }
.eng-anel__circulo { fill: none; stroke: var(--color-border-subtle); stroke-width: var(--border-width-traco); }
.eng-anel__ponto  { fill: var(--color-surface-primary); stroke: var(--color-border-strong); stroke-width: var(--border-width-traco); }
.eng-anel__rotulo { font-family: var(--type-font-family-body); font-size: var(--type-font-size-xs); fill: var(--color-text-secondary); text-anchor: middle; dominant-baseline: central; }

.eng-anel__ponto--dominante { fill: var(--color-surface-brand); stroke: var(--color-surface-brand); }
.eng-anel__rotulo--dominante { fill: var(--color-brand-creme); font-weight: var(--type-font-weight-bold); }
.eng-anel__ponto--asa { fill: var(--color-surface-accent); stroke: var(--color-brand-dourado); }
.eng-anel__rotulo--asa { fill: var(--color-text-primary); font-weight: var(--type-font-weight-bold); }
.eng-anel__seta { fill: none; stroke: var(--color-brand-verde); stroke-width: var(--border-width-espesso); }
.eng-anel__seta--estresse { stroke: var(--color-derived-dourado-texto); stroke-dasharray: 6 5; }

/* Dentro do mapa a lista perde a coluna do termo: ao lado do anel sobra menos
   da metade da largura, e 22ch de termo espremeriam a explicação numa tira de
   quatro palavras por linha. */
.eng-mapa .eng-fato { grid-template-columns: 1fr; gap: var(--space-scale-4); }
.eng-mapa .eng-fato__termo { font-size: var(--type-font-size-lg); }

@media (min-width: 56rem) {
  .eng-mapa { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-scale-48); }
  .eng-mapa__desenho { justify-self: start; position: sticky; top: var(--space-scale-96); }
}

/* ---- espectro dos nove escores ---- */

.eng-espectro { display: grid; gap: var(--space-scale-24); margin-top: var(--space-scale-8); }
.eng-espectro .ds-medida { max-width: none; }
.eng-medida__nome { font-weight: var(--type-font-weight-normal); color: var(--color-text-secondary); }
/* O dominante ganha peso, não cor: a barra já é verde em todas as linhas. */
.eng-medida--dominante .ds-medida__rotulo { font-weight: var(--type-font-weight-bold); }

/* ---- segundo e terceiro colocados ---- */

.eng-alternativos { display: grid; gap: var(--space-scale-24); margin-top: var(--space-scale-8); }
.eng-alternativos .ds-cartao { border-color: var(--color-border-subtle-inverse); }
.eng-alternativos h4 { margin: 0 0 var(--space-scale-8); }
.eng-alternativos p  { margin: 0; }

@media (min-width: 48rem) {
  .eng-alternativos { grid-template-columns: repeat(2, 1fr); gap: var(--space-layout-gap); }
}

/* ---- rodapé ---- */

.ds-rodape .eng-envelope { display: grid; gap: var(--space-scale-8); }
.ds-rodape p { margin: 0; max-width: var(--type-measure-body); }