/*
 * edg-app.css -- a folha que precisa existir ANTES da primeira pintura.
 *
 * POR QUE UM ARQUIVO SO PRA ISTO, se o nav-global.js ja injeta CSS:
 * o nav-global.js e `defer`. Ele so roda depois que o HTML foi lido, e o
 * navegador ja pintou a pagina antes disso. A barra entao nascia no topo do
 * <body> e empurrava a pagina inteira 53px pra baixo -- medido: CLS 0,042 na
 * taxonomia e 0,036 no banco de questoes, o empurrao caindo ~90ms depois da
 * tela aparecer. E exatamente o "pisca" ao trocar de ferramenta pelo menu.
 *
 * Um <link rel="stylesheet"> bloqueia a renderizacao por definicao: quando o
 * primeiro pixel aparece, o espaco da barra JA esta reservado. Nao da pra
 * fazer isso por JS -- qualquer script chega depois da decisao de pintar.
 *
 * Continua valendo a regra do menu: UM arquivo, referenciado pelas 3
 * ferramentas. Nada de CSS copiado em cada pagina.
 */

:root {
  /* Fonte unica da altura da barra. O nav-global.js LE daqui; se um dia a
     barra mudar de tamanho, muda neste ponto e os dois acompanham. */
  --edg-nav-h: 53px;
}

/* O espaco da barra, reservado antes de existir barra nenhuma. A barra e
   `position: fixed` (ver nav-global.js), entao ela ocupa este vao em vez de
   empurrar o conteudo. */
body {
  padding-top: var(--edg-nav-h);
}

/* Transicao de pagina nativa do navegador. As 3 ferramentas sao documentos
   HTML separados -- trocar de uma pra outra e uma navegacao de verdade, e o
   navegador mostra branco entre uma e outra enquanto a proxima nao pinta. O
   banco de questoes e o caso pior, porque tem meio mega de HTML pra ler
   antes do primeiro pixel.
   Com isto o Chrome e o Safari recentes fazem um cross-fade entre as duas
   telas em vez do corte seco: fica com cara de app trocando de aba, que era
   o pedido. Navegador que nao suporta simplesmente ignora a regra e volta ao
   comportamento de hoje -- nao ha o que quebrar. */
@view-transition { navigation: auto; }

/* Keep the author and navigation anchored as tools change underneath them. */
body .brand, body .edg-author {
  display:flex; align-items:center; gap:11px; width:fit-content;
  margin-bottom:0; view-transition-name:edg-author;
}
body .brand .avatar, body .edg-author img {
  box-sizing:border-box; width:46px; height:46px; flex:none;
  object-fit:cover; border-radius:50%;
  border:1.5px solid #ffffff40;
  box-shadow:0 0 14px 4px #ffffff30,0 0 30px 10px #c8c8d215;
}
body .brand .name-row, body .edg-author-name {
  display:flex; align-items:center; gap:5px; line-height:1.45;
}
body .brand .name-row span, body .brand .nome, body .edg-author-name {
  font-size:16px; font-weight:700; line-height:1.45; letter-spacing:0;
}
body .brand small, body .brand .arroba, body .edg-author small {
  font-size:13px; font-weight:600; line-height:1.5; margin-top:0; color:#8f9cb0;
}
body .brand .verified, body .edg-author-name svg { width:16px; height:16px; flex:none; }
body .brand + h1, body .edg-module-header h1 {
  margin:24px 0 8px; font-size:23px; line-height:1.3; font-weight:700; letter-spacing:-.5px;
}
#edg-nav { view-transition-name:edg-navigation; }
::view-transition-group(edg-author), ::view-transition-group(edg-navigation) { animation-duration:0s; }
::view-transition-old(edg-author), ::view-transition-old(edg-navigation) { display:none; }
::view-transition-new(edg-author), ::view-transition-new(edg-navigation) { animation:none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:140ms; }
@media(max-width:600px) {
  body .wrap:has(>.brand), body .edg-module-header { padding-top:24px; padding-inline:16px; }
  body .brand .name-row span, body .brand .nome, body .edg-author-name { font-size:14px; }
  body .brand + h1, body .edg-module-header h1 { margin-top:20px; font-size:22px; }
}

/* Quem pediu pra reduzir animacao no sistema nao recebe o cross-fade. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* A barra so existe depois que o nav-global.js roda. Mesmo com ele `async` e
   montando assim que o <body> aparece, sobra uma fresta de tempo em que o vao
   reservado la em cima esta vazio -- e um vao vazio no topo e visivel, ainda
   mais entrando numa pagina pesada.
   Este bloco pinta um substituto com a MESMA cara da barra (mesmo fundo,
   mesma borda), um degrau abaixo dela no z-index. Quando a barra de verdade
   nasce, cobre este por cima e ninguem percebe a troca: nao ha nada piscando,
   so os links aparecendo dentro de uma faixa que ja estava la. */
html::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--edg-nav-h);
  z-index: 9989;
  background: var(--panel, var(--card, #151922));
  border-bottom: 1px solid var(--border, #2a2f3c);
  box-sizing: border-box;
  pointer-events: none;
}