/* ===========================================================================
   Confere.la · CASCA
   O topo, a navegação e o rodapé. De TODAS as telas, num arquivo só.

   POR QUE ESTE ARQUIVO NASCEU
   `scripts/lib/pagina.mjs` já dizia, no próprio comentário, que "a navegação é
   UMA" e que `casca()` é o único lugar onde ela existe. Isso era verdade para o
   HTML e mentira para o estilo: `.topo`, `.marca`, `.nav` e `.nav-item` viviam
   copiados em guia.css, elenco.css e mapa.css. E já tinham divergido:

     guia    aba de 44px, ativa em tinta cheia, topo grudado no alto
     elenco  aba de 34px, ativa com moldura, topo que rola embora
     mapa    aba de 44px, ativa com moldura, topo que rola embora

   Três navegações para um site que declarava ter uma. Nenhum teste pegava,
   porque nenhum teste olha aparência. As três folhas até avisavam, por escrito,
   que sairiam daqui "no dia em que existir uma folha de casca compartilhada".
   Este é o dia. Agora quem mexe na navegação mexe em UM lugar, e não existe o
   caminho errado de mexer em dois e esquecer o terceiro.

   O desenho é o da Netflix, e isso é ordem do dono, não gosto:
     · topo fixo, transparente no alto da página e sólido depois da rolagem
     · aba acesa em branco cheio, aba dormindo em cinza claro
     · menu que abre (o estado) em vez de aba que leva embora
     · preto de verdade por baixo, porque a arte da tela é o retrato e a
       miniatura, e cinza rouba contraste de imagem

   O tema claro continua legítimo: ele é escolha de quem lê, guardada por
   casca.js. O que mudou é o valor de partida, que agora é escuro.
   =========================================================================== */

/* ============================================================== 1 · MEDIDA
   O topo tem altura declarada porque a página inteira depende dela: a vitrine
   sobe o billboard por baixo do topo e as outras telas descem o conteúdo. Um
   topo de altura desconhecida obriga cada tela a chutar um respiro. */

:root {
  --topo-h: 68px;
  --topo-h-min: 56px;
  --casca-x: clamp(16px, 4vw, 60px);

  /* O texto que não está aceso, e o que está.

     Os dois PRECISAM virar no tema claro, e não é questão de gosto: --nav-on
     também pinta os anéis de foco de teclado (marca, aba, item de menu, botão
     de ícone). Branco sobre o topo claro, que é --bg-1 (#f9fafb), é um anel
     invisível: quem navega por teclado deixa de saber onde está.

     A prova de que isto foi descuido e não decisão está logo abaixo, na seção
     6: a linha branca do alto do painel JÁ tinha o conserto para o tema claro
     (border-top-color: var(--ink)). Um caso lembrado, quatro esquecidos. */
  --nav-off: #b3b3b3;
  --nav-on: #ffffff;
}

[data-theme="light"] {
  --nav-off: #6b7280;  /* = --muted */
  --nav-on: #111827;   /* = --ink   */
}

@media (max-width: 720px) {
  :root { --topo-h: var(--topo-h-min); }
}

/* =============================================================== 2 · O TOPO
   Fixo, não grudado. `sticky` reserva o espaço dele no fluxo, e a vitrine
   precisa que o billboard comece ATRÁS do topo, colado no alto da janela, que
   é o que a Netflix faz. Quem reserva o respiro é cada tela, com --topo-h. */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;

  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  height: var(--topo-h);
  padding: 0 var(--casca-x);

  /* No alto da página o topo é um véu que escurece a arte por baixo sem
     tapar. Depois da primeira rolagem ele fecha. A transição é a assinatura
     do gesto: sem ela, o topo pisca. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, 0) 100%);
  transition: background-color .34s var(--ease), backdrop-filter .34s var(--ease);
}

.topo[data-solido='true'] {
  background: var(--bg-1);
  background-image: none;
  border-bottom: var(--rule) solid var(--line-soft);
}

/* Tela clara: o véu de preto sobre papel branco vira sujeira. Ali o topo já
   nasce fechado, porque não há arte escura por baixo para deixar aparecer. */
[data-theme='light'] .topo {
  background: var(--bg-1);
  background-image: none;
  border-bottom: var(--rule) solid var(--line-soft);
}

/* ============================================================== 3 · A MARCA */

.marca {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--nav-on);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--tempo) var(--ease);
}

/* O ponto da marca é o único verde-limão da casca: fora daqui, essa tinta só
   aparece no selo de quem está no ar. É o sinal de vida do produto, gasto numa
   coisa só para continuar sendo achado com o canto do olho. */
.marca::after {
  content: '';
  display: inline-block;
  width: .32em;
  height: .32em;
  margin-left: .18em;
  border-radius: 50%;
  background: var(--vivo);
  vertical-align: baseline;
}

[data-theme='light'] .marca { color: var(--ink); }
.marca:focus-visible { outline: 2px solid var(--nav-on); outline-offset: 4px; }

/* ========================================================= 4 · A NAVEGAÇÃO
   A aba não tem moldura, não tem fundo e não tem caixa. Ela tem PESO e TINTA:
   os dois dizem onde você está sem precisar de moldura, e caixa em volta de
   aba é vocabulário de painel de controle, não de vitrine. */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 20px);
  min-width: 0;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  height: var(--topo-h);
  padding: 0 2px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: var(--peso-corpo);
  line-height: 1;
  color: var(--nav-off);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .22s var(--ease);
}

.nav-item:hover { color: var(--nav-off); filter: brightness(1.35); }

.nav-item[data-ativo='true'] {
  color: var(--nav-on);
  font-weight: var(--peso-forte);
}

.nav-item:focus-visible {
  outline: 2px solid var(--nav-on);
  outline-offset: 2px;
  border-radius: 3px;
}

[data-theme='light'] .nav-item { color: var(--muted); }
[data-theme='light'] .nav-item:hover { color: var(--ink); filter: none; }
[data-theme='light'] .nav-item[data-ativo='true'] { color: var(--ink); }

/* ------------------------------------------------- 4.1 · a nav do telefone
   Abaixo de 860px as abas somam mais largura do que a tela tem. Elas viram um
   menu único ("Navegar"), que é exatamente o que a Netflix faz no telefone.
   As abas não somem: elas mudam de forma.

   `display: contents` no invólucro das abas largas: ele precisa sumir da conta
   do flex quando existe, senão as quatro abas viram UM item e o espaçamento
   entre elas some. E ele precisa poder sumir de verdade no telefone, o que só
   funciona se a regra estiver numa folha (atributo `style` no HTML vence
   qualquer consulta de mídia, e a aba larga ficaria visível no telefone junto
   com o menu que veio substituí-la).

   A TROCA DAS DUAS VIVE NO FIM DA SEÇÃO 5, depois de `.menu`. Não é gosto de
   organização: `.menu` declara `display: inline-flex` e tem a mesma força que
   `.nav-mobile`, então quem vier por último ganha. Escrito aqui em cima, o
   menu do telefone aparecia junto com as abas largas no monitor. */

.nav-larga { display: contents; }

/* ============================================================ 5 · O MENU QUE ABRE
   Duas coisas usam esta peça: "Por estado" (as 27 unidades) e o "Navegar" do
   telefone. Ela abre por clique, não por passagem do mouse: menu que abre ao
   passar por cima dispara sozinho quando a pessoa só estava indo para outro
   lugar, e no toque não existe passar por cima.

   Fecha com Escape, com clique fora e ao escolher. As três saídas existem
   porque um menu com uma saída só é um menu que prende alguém. */

.menu {
  position: relative;
  display: inline-flex;
}

.menu-gatilho::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  transition: transform .24s var(--ease);
}

.menu[data-aberto='true'] .menu-gatilho { color: var(--nav-on); }
.menu[data-aberto='true'] .menu-gatilho::after { transform: translateY(-2px) rotate(180deg); }

.menu-painel {
  position: absolute;
  top: calc(var(--topo-h) - 12px);
  left: 50%;
  z-index: 110;

  width: max-content;
  max-width: min(92vw, 560px);
  max-height: min(66vh, 520px);
  /* Painel com muita gente dentro precisa de LARGURA DECLARADA, não
     `max-content`. A grade de estados usa `auto-fill`, e `auto-fill` divide a
     largura que o pai tem: com `max-content`, o pai mede um item só e a grade
     nasce com UMA coluna. Os 27 estados viravam uma tira de 1000px de altura
     rolando dentro de um painel de 520. Quem tem poucos itens (o menu
     "Navegar", com quatro) continua no `max-content`, que é o certo para ele. */
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* OPACO, não quase opaco. A 92% o billboard atravessava o painel e o título
     da transmissão ficava competindo com os nomes dos estados. E o defeito era
     do tipo que não dá para testar: a arte de fundo é a miniatura da
     transmissão do dia, muda a cada varredura, e num dia claro a leitura do
     menu dependia da sorte. Menu que depende da foto que estiver atrás não é
     menu, é aposta. O desfoque fica como reforço, não como o remédio. */
  background: var(--bg-1);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6);
  border: var(--rule) solid var(--line);
  /* A linha branca no alto é a assinatura do menu da Netflix: ela diz de onde
     o painel saiu, e por isso ela é grossa e é a única. */
  border-top: 2px solid var(--nav-on);
  border-radius: 2px;

  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

[data-theme='light'] .menu-painel {
  background: var(--surface);
  border-top-color: var(--ink);
}

.menu[data-aberto='true'] .menu-painel {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.menu-painel[data-largo='true'] {
  width: min(92vw, 520px);
}

/* O painel encosta na borda direita quando não cabe centralizado. */
.menu-painel[data-ancora='fim'] {
  left: auto;
  right: 0;
  transform: translate(0, -8px);
}
.menu[data-aberto='true'] .menu-painel[data-ancora='fim'] { transform: translate(0, 0); }

.menu-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 2px;
}

@media (max-width: 520px) {
  .menu-grade { grid-template-columns: repeat(2, 1fr); }
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--nav-off);
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.menu-item:hover,
.menu-item:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: var(--nav-on);
  outline: none;
}

.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--nav-on); }

[data-theme='light'] .menu-item { color: var(--ink-2); }
[data-theme='light'] .menu-item:hover,
[data-theme='light'] .menu-item:focus-visible { background: var(--bg-2); color: var(--ink); }

/* A sigla à esquerda do nome. Largura fixa para os nomes alinharem numa
   coluna só, senão a grade vira uma escada. */
.menu-sigla {
  flex: 0 0 24px;
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ls-lab-tight);
  color: var(--faint);
}
.menu-item:hover .menu-sigla { color: var(--nav-on); }

.menu-rodape {
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--rule) solid var(--line);
}

.menu-titulo {
  padding: 4px 10px 8px;
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ls-lab);
  text-transform: uppercase;
  color: var(--faint);
}

/* -------------------------------------------- 5.1 · quem aparece em cada tela
   Esta troca fica DEPOIS de `.menu` de propósito, e o comentário existe para
   ninguém "organizar" isto de volta para a seção 4: `.menu { display:
   inline-flex }` tem a mesma força que `.nav-mobile { display: none }`, e no
   empate ganha quem vem por último. Com as regras lá em cima, o menu
   "Navegar" do telefone aparecia no monitor ao lado das abas que ele
   substitui. Foi assim que aconteceu, e foi a captura de tela que pegou. */

.nav-mobile { display: none; }

@media (max-width: 860px) {
  .nav-larga { display: none; }
  .nav-mobile { display: inline-flex; }
}

/* =============================================================== 6 · A DIREITA
   Busca e tema. Ficam empurrados para a borda por uma folga elástica, que é o
   que separa "onde eu vou" (esquerda) de "o que eu faço aqui" (direita). */

.topo-fim {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--nav-on);
  cursor: pointer;
  transition: background .2s var(--ease);
}

.icone-btn:hover { background: rgba(255, 255, 255, .14); }
.icone-btn:focus-visible { outline: 2px solid var(--nav-on); outline-offset: 2px; }
.icone-btn svg { width: 20px; height: 20px; }

[data-theme='light'] .icone-btn { color: var(--ink); }
[data-theme='light'] .icone-btn:hover { background: var(--bg-3); }

/* Só um dos dois ícones do tema aparece por vez. Quem decide é o atributo no
   elemento raiz, não o script: assim a página nasce certa, sem piscar. */
.i-claro, .i-escuro { display: none; }
[data-theme='dark'] .i-claro { display: block; }
[data-theme='light'] .i-escuro { display: block; }

/* ------------------------------------------------------------ 6.1 · a busca
   A lupa que vira campo, como na Netflix. Fechada ela é um botão redondo;
   aberta, um campo com a lupa dentro. Sem script ela continua sendo um link
   para a tela de busca do arquivo, que é a degradação certa: nunca um botão
   que não faz nada. */

.casca-busca {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: var(--rule) solid transparent;
  border-radius: 2px;
  transition: border-color .24s var(--ease), background .24s var(--ease);
}

.casca-busca[data-aberta='true'] {
  background: rgba(0, 0, 0, .78);
  border-color: rgba(255, 255, 255, .7);
}

[data-theme='light'] .casca-busca[data-aberta='true'] {
  background: var(--surface);
  border-color: var(--line-hard);
}

.casca-busca-campo {
  width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: width .3s var(--ease), padding .3s var(--ease);
}

.casca-busca[data-aberta='true'] .casca-busca-campo {
  width: clamp(140px, 22vw, 240px);
  padding: 0 10px 0 4px;
}

.casca-busca-campo::placeholder { color: var(--faint); }

@media (max-width: 520px) {
  .casca-busca[data-aberta='true'] .casca-busca-campo { width: 42vw; }
}

/* ============================================================= 7 · O CONTEÚDO
   O respiro do topo fixo. A vitrine desliga isto (ela sobe o billboard por
   baixo do topo), e é o único lugar que desliga. */

.conteudo {
  padding-top: var(--topo-h);
}

.conteudo[data-sob-topo='true'] {
  padding-top: 0;
}

/* ============================================================== 8 · O RODAPÉ
   Um rodapé só, nas telas de navegação. A arena tem o dela, que é barra de
   estado e não rodapé de site. */

.casca-rodape {
  padding: 44px var(--casca-x) 56px;
  border-top: var(--rule) solid var(--line-soft);
  color: var(--muted);
}

.casca-rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 22px;
}

.casca-rodape-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.casca-rodape-links a:hover { color: var(--ink); text-decoration: underline; }
.casca-rodape-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.casca-rodape-nota {
  max-width: 62ch;
  font-size: var(--t-nota);
  line-height: var(--linha-corpo);
  color: var(--faint);
}

/* ====================================================== 9 · QUEM DESLIGOU O MOVIMENTO
   Nada aqui carrega informação por movimento: a transição do topo e a abertura
   do menu são conforto. Quem pediu para o sistema parar de animar recebe o
   mesmo estado final, na hora. */

@media (prefers-reduced-motion: reduce) {
  .topo,
  .menu-painel,
  .menu-gatilho::after,
  .casca-busca,
  .casca-busca-campo,
  .nav-item,
  .icone-btn,
  .marca,
  .menu-item {
    transition: none;
  }
}