/* A casca: grade, faixa, navegação e gaveta.
 *
 * Onde as coisas ficam, e como a navegação vira gaveta em tela estreita.
 * Não conhece eleição, não conhece formulário.
 *
 * Parte de estilo/. A folha foi dividida por assunto em 03/08/2026: 915 linhas
 * num arquivo só obrigavam a rolar por tudo para achar qualquer coisa.
 *
 * Ligadas por <link> múltiplo, e NÃO por @import: @import encadeia downloads —
 * o navegador só descobre o segundo arquivo depois de baixar o primeiro. */

/* ----------------------------------------------------------------- casca */

/* Grade nomeada: a navegação e o conteúdo trocam de arranjo por uma
   declaração, e a ordem do DOM continua a mesma nas duas formas — teclado e
   leitor de tela seguem o DOM, não o desenho. */
.casca {
  display: grid;
  grid-template-areas: "conteudo";
  grid-template-columns: 1fr;
}

.lateral {
  grid-area: navegacao;
}
main {
  grid-area: conteudo;
  padding: 1.5rem 1.25rem 4rem;
  min-width: 0;
}

/* min-width: 0 acima não é decoração: sem ele, um item de grade se recusa a
   encolher abaixo do conteúdo mais largo, e a tabela empurra a página. */

/* O conteúdo principal recebe o foco a cada troca de área, para o leitor de tela
   começar a ler do que apareceu. O ANEL desse foco, porém, não serve a ninguém.

   Um anel de foco responde a uma pergunta: "para onde vão as minhas teclas?".
   Aqui não vão para lugar nenhum — `#conteudo` tem `tabindex="-1"`, nunca está na
   ordem de Tab, e não recebe digitação. E como ele mede a altura inteira do
   painel, o navegador desenhava esse anel contornando a tela toda: lido como
   moldura clara em volta de tudo, que parece defeito e é ruído.

   Apagar aqui não esconde nada de ninguém: quem navega por teclado jamais chega
   a este elemento por conta própria, e quem usa leitor de tela é avisado pelo
   foco em si, não pelo anel. O sinal de que a área trocou é a área ter trocado.

   Isto NÃO vale para controle nenhum. Campo, botão e link continuam com o anel
   deles, em `formas.css`. */
main#conteudo:focus,
main#conteudo:focus-visible {
  outline: none;
}

.lateral ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
}

.lateral a {
  display: block;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.15rem;
  border-radius: 8px;
  border-left: 4px solid transparent;
  color: var(--tinta);
  text-decoration: none;
  font-size: var(--texto-apoio);
  min-height: 2.75rem;
}

.lateral a:hover {
  background: var(--acao-clara);
}

/* A área atual é marcada por fundo, barra lateral e peso — nunca só por cor.
   Quem não distingue estas cores continua sabendo onde está. */
.lateral a[aria-current="page"] {
  background: var(--acao-clara);
  border-left-color: var(--acao);
  color: var(--acao);
  font-weight: 600;
}

.botao-gaveta {
  display: none;
}
.cortina {
  display: none;
}

/* Telas largas: navegação permanente ao lado do conteúdo. O ponto de quebra
   está em rem de propósito — quem aumenta a fonte do navegador recebe o
   layout estreito mais cedo, que é o comportamento correto. */
@media (min-width: 48rem) {
  .casca {
    grid-template-areas: "navegacao conteudo";
    grid-template-columns: 15rem minmax(0, 1fr);
    max-width: 84rem;
    margin: 0 auto;
  }

  .lateral {
    border-right: 1px solid var(--borda);
    align-self: start;
    position: sticky;
    top: 0;
  }
}

/* Telas estreitas: a navegação vira gaveta sobreposta. Fechada, sai do fluxo
   e do alcance do Tab — conteúdo focável invisível é armadilha para quem
   navega por teclado. */
@media (max-width: 47.999rem) {
  .botao-gaveta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    order: -1;
    padding: 0.5rem 0.8rem;
    min-height: 2.75rem;
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--borda);
  }

  .hamburguer {
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    box-shadow:
      0 -6px currentColor,
      0 6px currentColor;
  }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(17rem, 82vw);
    overflow-y: auto;
    background: var(--cartao);
    border-right: 1px solid var(--borda);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
  }

  .lateral[hidden] {
    display: none;
  }

  .cortina {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.45);
  }

  .cortina[hidden] {
    display: none;
  }
}

/* Hierarquia por tamanho, peso E espaço — as três juntas.
   Só tamanho não basta: 1.5rem contra 1.05rem era diferença pequena demais
   para o olho saber onde pousar. */