/*
 * /recomendacao (o quiz): as perguntas em cartões clicáveis, o resultado em 3 tiles do mesmo
 * tamanho (o recomendado primeiro no celular), "Outras opções" e "Acima do orçamento". Só tokens;
 * a camada é a das páginas.
 */
@layer paginas {
  .quiz__area {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .quiz__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .quiz__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
  }

  .quiz__titulo h1 {
    margin: 0;
  }

  /* O título que recebe o foco por programa (a pergunta, o resultado) não é um controle: sem o
     contorno. O leitor de tela lê o título do mesmo jeito. */
  .quiz__area [tabindex="-1"]:focus {
    outline: none;
  }

  .quiz__passo {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 64rem;
  }

  /* Progresso: um segmento por passo, o feito na cor de destaque. */
  .quiz__progresso {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 24rem;
  }

  .quiz__barra {
    display: flex;
    gap: var(--space-1);
  }

  .quiz__seg {
    flex: 1;
    height: 0.3125rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
  }

  .quiz__seg--feito {
    background-color: var(--color-accent);
  }

  .quiz__grupo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .quiz__grupo legend {
    grid-column: 1 / -1;
    margin-bottom: var(--space-2);
    padding: 0;
  }

  .quiz__grupo > :not(legend, .quiz__opcao) {
    grid-column: 1 / -1;
  }

  /* Ilustração própria no alto do tile do resultado. */
  .quiz__tile-midia {
    position: relative;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-muted);
    background-image:
      linear-gradient(var(--color-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  .quiz__tile-midia .ilustracao {
    width: 100%;
    height: 100%;
    padding: var(--space-2);
  }

  .quiz__tile-ilustracao {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-1);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .quiz__opcao--icone {
    align-items: center;
    padding: var(--space-4);
  }

  .quiz__opcao--icone .icone-uso {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--color-accent);
  }
  :where(html[data-movimento="ligado"]) .quiz__opcao {
    transition:
      border-color 0.15s ease,
      transform 0.15s ease;
  }

  :where(html[data-movimento="ligado"]) .quiz__opcao:hover {
    transform: translateY(-1px);
  }

  :where(html[data-movimento="ligado"]) .quiz__seg {
    transition: background-color 0.25s ease;
  }

  .quiz__grupo h2 {
    margin: 0;
    font-size: var(--text-xl);
  }

  .quiz__dica {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-fg-muted);
  }

  .quiz__opcao {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--target-min);
    padding: var(--space-3);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    cursor: pointer;
  }

  .quiz__opcao:has(:checked) {
    border-color: var(--color-accent);
    background-color: var(--color-bg-muted);
  }

  .quiz__opcao input {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: var(--space-1) 0 0;
    accent-color: var(--color-accent);
  }

  .quiz__rotulo {
    display: flex;
    flex-direction: column;
    font-weight: var(--font-weight-medium);
  }

  .quiz__rotulo .texto-suave {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
  }

  .quiz__valor {
    max-width: 20rem;
  }

  /* O .ui-field do design system (camada components) venceria o [hidden] da base. */
  .quiz__valor[hidden] {
    display: none;
  }

  .quiz__erro {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
  }

  .quiz__erro:empty {
    display: none;
  }

  .quiz__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .quiz__falha,
  .quiz__vazio,
  .quiz__mais-perto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 65ch;
  }

  .quiz__vazio h2,
  .quiz__resultado-topo h2,
  .quiz__acima h2 {
    margin: 0;
    font-size: var(--text-lg);
  }

  .quiz__resultado-topo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .quiz__tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-4);
  }

  .quiz__tile {
    position: relative;
  }

  /* No celular, o recomendado vem primeiro. */
  .quiz__tile--recomendado {
    border-color: var(--color-border-control);
  }

  @media (width >= 64rem) {
    .quiz__tiles {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quiz__tile--recomendado {
      order: 0;
    }
  }

  .quiz__tile-corpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
  }

  .quiz__tile-corpo > .ui-badge {
    align-self: flex-start;
  }

  .quiz__tile h3 {
    margin: 0;
    font-size: var(--text-lg);
  }

  /* O card inteiro responde ao clique pelo título; o botão fica por cima. */
  .quiz__tile-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    color: var(--color-fg);
    text-decoration: none;
  }

  .quiz__tile-link:hover {
    text-decoration: underline;
  }

  .quiz__tile-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .quiz__tile-acao {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: var(--space-1);
  }

  .quiz__carrinho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .quiz__perfil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .quiz__recomendado {
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-muted);
    color: var(--color-fg);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .quiz__mais-perto .quiz__tile {
    width: 100%;
    max-width: 28rem;
  }

  .quiz__outras {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .quiz__outras-lista,
  .quiz__acima ul {
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--color-border);
    list-style: none;
  }

  .quiz__outro {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 5.5rem;
    padding-block: var(--space-3);
    color: var(--color-fg);
    text-decoration: none;
  }

  .quiz__outro-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .quiz__outro-nome {
    font-weight: var(--font-weight-semibold);
  }

  .quiz__outro-specs {
    overflow: hidden;
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quiz__outro-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }

  .quiz__outro-preco {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-end;
    gap: var(--space-1);
    text-align: end;
  }

  .quiz__outro-ver {
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
  }

  @media (width < 40rem) {
    .quiz__outro-ver {
      display: none;
    }
  }

  .quiz__mais {
    align-self: flex-end;
  }

  .quiz__acima {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .quiz__acima li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  .quiz__acima li a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }

  .quiz__acima-nome {
    font-weight: var(--font-weight-medium);
  }

  .quiz__acima-nome .texto-suave {
    font-weight: var(--font-weight-regular);
  }

  .aviso--erro {
    border-color: var(--color-danger);
  }

  .quiz__outras-lista li + li,
  .quiz__acima li + li {
    border-top: 1px solid var(--color-border);
  }

  .quiz__outro:hover .quiz__outro-nome {
    text-decoration: underline;
  }
}