/* =====================================================================
   O manual — a língua visual

   UM SÓ ARQUIVO PARA TODAS AS PÁGINAS.

   Documentação que cresce página a página vira dez visuais diferentes
   se cada página trouxer o próprio estilo. Aqui é o contrário: a
   página nova nasce com o índice, o código, as tabelas e os avisos já
   prontos, e quem escreve só escreve o conteúdo.

   A paleta é fria (o chão puxa para o azul-cinza) com um único acento
   âmbar, que é a cor do servidor. Fundo frio com acento quente separa
   o que é leitura do que é aviso sem precisar de segunda cor.
   ===================================================================== */

:root {
  --chao:    #eef2f6;
  --papel:   #ffffff;
  --papel-2: #f6f9fb;
  --tinta:   #141d26;
  --tinta-2: #4a5b6b;
  --tinta-3: #7a8b9b;
  --linha:   #d7e0e9;
  --linha-2: #e7edf3;
  --acento:  #9a4f06;
  --acento-suave: rgba(154, 79, 6, .09);
  --ok:      #136f45;
  --ok-suave: rgba(19, 111, 69, .1);
  --alerta:  #a92316;
  --alerta-suave: rgba(169, 35, 22, .08);
  --codigo-fundo: #0f171e;
  --codigo-tinta: #d7e3ee;
  --codigo-comentario: #6f8496;

  --titulo: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --corpo: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* O tema escuro segue o do sistema. Os três estados existem: escolha
   explícita clara, escolha explícita escura, e o padrão (nenhum
   carimbo), que é o caso da maioria. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --chao:    #0b1015;
    --papel:   #111921;
    --papel-2: #161f28;
    --tinta:   #e4ebf2;
    --tinta-2: #9fb0bf;
    --tinta-3: #6d8092;
    --linha:   #223039;
    --linha-2: #1b262e;
    --acento:  #ff9c42;
    --acento-suave: rgba(255, 156, 66, .12);
    --ok:      #54d693;
    --ok-suave: rgba(84, 214, 147, .12);
    --alerta:  #ff7a6e;
    --alerta-suave: rgba(255, 122, 110, .12);
    --codigo-fundo: #080d12;
    --codigo-tinta: #cfdce7;
    --codigo-comentario: #63788a;
  }
}

:root[data-tema="escuro"] {
  --chao:    #0b1015;
  --papel:   #111921;
  --papel-2: #161f28;
  --tinta:   #e4ebf2;
  --tinta-2: #9fb0bf;
  --tinta-3: #6d8092;
  --linha:   #223039;
  --linha-2: #1b262e;
  --acento:  #ff9c42;
  --acento-suave: rgba(255, 156, 66, .12);
  --ok:      #54d693;
  --ok-suave: rgba(84, 214, 147, .12);
  --alerta:  #ff7a6e;
  --alerta-suave: rgba(255, 122, 110, .12);
  --codigo-fundo: #080d12;
  --codigo-tinta: #cfdce7;
  --codigo-comentario: #63788a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--chao);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   A BARRA DE CIMA

   Ela agora carrega a marca, a busca e a saída — e é a única parte da
   wiki que se parece com o painel de propósito: são o mesmo sistema, e
   quem vem de lá tem de reconhecer onde chegou.

   Fica colada no topo porque a busca é o motivo de a pessoa estar aqui:
   rolar quatro seções para procurar de novo é o que faz alguém desistir
   e perguntar no Discord.
   ===================================================================== */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.barra-dentro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.barra .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.barra .marca img {
  width: 104px;
  height: auto;
  display: block;

  /* O logotipo é branco, feito para fundo escuro. No tema claro ele
     desaparece na página — invertê-lo custa uma linha e evita ter de
     manter duas artes da mesma marca. */
  filter: invert(1) brightness(.35);
}
.barra .marca span {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--tinta-3);
  padding-left: 10px;
  border-left: 1px solid var(--linha);
}

:root[data-tema="escuro"] .barra .marca img { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .barra .marca img { filter: none; }
}

.barra .aqui {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-2);
}

.barra-busca {
  flex: 1;
  max-width: 340px;
  margin-left: auto;
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.barra-busca:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.barra-busca::placeholder { color: var(--tinta-3); }

.barra-fim { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.barra-busca + .barra-fim { margin-left: 0; }

.barra-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--tinta-2);
  text-decoration: none;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
  transition: color .14s, border-color .14s;
}
.barra-botao:hover { color: var(--acento); border-color: var(--acento); }
.barra-botao svg { width: 15px; height: 15px; fill: currentColor; }
.barra-botao--texto { font-family: var(--corpo); }

/* Enquanto se busca, o texto que não é estante sai do caminho: ele não
   responde a busca nenhuma e só empurra os resultados para baixo. */
body.buscando .capa,
body.buscando footer { display: none; }

@media (max-width: 700px) {
  .barra-dentro { flex-wrap: wrap; gap: 10px; }
  .barra-busca { max-width: none; order: 3; flex-basis: 100%; margin-left: 0; }
  .barra-botao--texto { display: none; }
}

/* =====================================================================
   ESTRUTURA
   ===================================================================== */

.folha {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.folha.solta { grid-template-columns: minmax(0, 1fr); gap: 0; }

.capa {
  grid-column: 1 / -1;
  padding: 56px 0 34px;
  border-bottom: 1px solid var(--linha);
}

.capa-nome {
  font-family: var(--mono);
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
}
.capa-nome span { color: var(--acento); }

.capa-titulo {
  font-family: var(--titulo);
  font-size: clamp(36px, 5.6vw, 56px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.capa-linha {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: balance;
}

/* As fichas do topo: dados que a página inteira pressupõe. */
.fichas {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--linha);
  background: var(--papel);
}
.ficha {
  flex: 1 1 168px;
  padding: 12px 16px;
  border-right: 1px solid var(--linha);
}
.ficha:last-child { border-right: none; }
.ficha dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.ficha dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--tinta);
}

/* =====================================================================
   ÍNDICE LATERAL
   ===================================================================== */

.indice { position: sticky; top: 28px; padding-top: 40px; }
.indice p {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.indice ol {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--linha);
}
.indice a {
  display: block;
  padding: 5px 0 5px 13px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  color: var(--tinta-2);
  text-decoration: none;
  line-height: 1.4;
}
.indice a:hover { color: var(--acento); border-left-color: var(--acento); }

/* =====================================================================
   TEXTO
   ===================================================================== */

main { padding-top: 40px; min-width: 0; }

section { margin-bottom: 60px; scroll-margin-top: 24px; }

h2 {
  font-family: var(--titulo);
  font-size: 27px; font-weight: 600;
  margin: 0 0 6px;
  text-wrap: balance;
}
h3 {
  font-family: var(--titulo);
  font-size: 19px; font-weight: 600;
  margin: 34px 0 8px;
}
h2 + p, h3 + p { margin-top: 0; }

p { max-width: 68ch; margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--acento); }

strong { font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--acento-suave);
  color: var(--acento);
  padding: 1px 5px;
}

pre {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--codigo-fundo);
  color: var(--codigo-tinta);
  border: 1px solid var(--linha);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.72;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
pre .c { color: var(--codigo-comentario); }
pre .k { color: #ffb066; }
pre .s { color: #8fd6a9; }

/* =====================================================================
   TABELAS
   ===================================================================== */

.rolo { overflow-x: auto; margin: 22px 0; border: 1px solid var(--linha); }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  background: var(--papel);
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha-2);
  vertical-align: top;
}
thead th {
  background: var(--papel-2);
  border-bottom: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td.m, th.m { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
td.d { color: var(--tinta-2); }

/* =====================================================================
   AVISOS

   Dois tipos, e a diferença é real: REGRA é uma convenção nossa;
   ARMADILHA é um bug que já derrubou este servidor. Quem lê sabe na
   hora se está diante de uma preferência ou de uma cicatriz.
   ===================================================================== */

.nota {
  margin: 22px 0;
  padding: 15px 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--tinta-3);
}
.nota > p { margin-bottom: 10px; }
.nota > p:last-child { margin-bottom: 0; }
.nota-topo {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
}
.nota.armadilha { border-left-color: var(--alerta); background: var(--alerta-suave); }
.nota.armadilha .nota-topo { color: var(--alerta); }
.nota.regra { border-left-color: var(--acento); background: var(--acento-suave); }
.nota.regra .nota-topo { color: var(--acento); }

/* =====================================================================
   LISTAS
   ===================================================================== */

ul.lista { max-width: 68ch; margin: 16px 0; padding: 0; list-style: none; }
ul.lista li { position: relative; padding-left: 18px; margin-bottom: 9px; }
ul.lista li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px;
  background: var(--tinta-3);
}

/* Número só onde a ordem significa alguma coisa. */
ol.passos { max-width: 68ch; margin: 18px 0; padding: 0; list-style: none; counter-reset: p; }
ol.passos li { counter-increment: p; position: relative; padding-left: 34px; margin-bottom: 14px; }
ol.passos li::before {
  content: counter(p);
  position: absolute; left: 0; top: 0;
  width: 22px; text-align: center;
  font-family: var(--mono); font-size: 12px;
  color: var(--acento);
  border-bottom: 1px solid var(--acento);
}

/* =====================================================================
   O CATÁLOGO

   A linha da estante: nome, tamanho e o comentário. Ela não é um
   cartão — cartão com sombra em volta de cada item transforma uma
   lista de treze coisas em treze objetos soltos, e o que interessa
   aqui é justamente compará-los de cima a baixo.
   ===================================================================== */

/* A ESTANTE.

   Cantos arredondados e uma borda só em volta, com as peças separadas
   por hairline por dentro: é uma lista de sistema, e não uma tabela de
   relatório. O `overflow: hidden` é o que faz o fundo do hover da
   primeira e da última peça respeitarem o canto arredondado. */
.estante {
  margin: 0 0 8px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  overflow: hidden;
}

.peca {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0 22px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linha-2);
  border-left: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background .14s, border-color .14s;
}
.peca:last-child { border-bottom: none; }
.peca:hover { background: var(--papel-2); }

/* A peça que TEM página própria se comporta como link: acende o acento
   na margem e no nome. A que não tem continua sendo texto, e por isso
   não finge ser clicável. */
a.peca:hover { border-left-color: var(--acento); }
a.peca:hover .peca-nome { color: var(--acento); }
a.peca:hover .peca-tem-pagina {
  transition: transform .14s; transform: translateX(3px); }

.peca-nome {
  font-family: var(--mono);
  font-size: 14px; font-weight: 500;
  color: var(--tinta);
}

.peca-tam {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.peca-texto { font-size: 14.5px; line-height: 1.6; color: var(--tinta-2); }
.peca-texto strong { color: var(--tinta); font-weight: 500; }

.peca-tem-pagina {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--acento);
}

/* O que está desligado é a mesma linha, apagada. Ela continua na
   estante porque "por que isto não está ligado" é a pergunta que
   volta toda vez que alguém abre a pasta de resources. */
.peca.frio .peca-nome { color: var(--tinta-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.grupo-topo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.grupo-topo h2 { margin: 0; }
.grupo-topo span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

footer {
  grid-column: 1 / -1;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  color: var(--tinta-3);
  max-width: 68ch;
}

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (max-width: 900px) {
  .folha { grid-template-columns: 1fr; gap: 0; }
  .indice { position: static; padding-top: 34px; }
  .indice ol { flex-flow: row wrap; border-left: none; }
  .indice a { padding: 4px 12px 4px 0; border-left: none; }
  main { padding-top: 30px; }
  .peca { grid-template-columns: 1fr; gap: 8px; }
}

/* =====================================================================
   O TEXTO DAS PÁGINAS DA EQUIPE

   Estas páginas vêm de Markdown, e por isso usam as tags nuas — <ul>,
   <blockquote>, <table>. As páginas escritas à mão usam classes
   (`ul.lista`), e as duas precisam terminar com a mesma aparência: quem
   lê não deveria conseguir dizer qual foi gerada.
   ===================================================================== */

.texto { max-width: 68ch; }
.texto ul, .texto ol { margin: 16px 0; padding-left: 22px; }
.texto li { margin-bottom: 8px; line-height: 1.65; }
.texto li::marker { color: var(--tinta-3); }

.texto blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--acento);
  color: var(--tinta-2);
}

.texto hr { margin: 32px 0; border: none; border-top: 1px solid var(--linha); }
.texto img { max-width: 100%; border-radius: 8px; border: 1px solid var(--linha); }
.texto del { color: var(--tinta-3); }

.texto pre.codigo { position: relative; }

/* A linguagem do bloco de código aparece no canto: num manual em que
   Lua, SQL e shell se alternam, saber qual é antes de ler a primeira
   linha economiza a leitura errada. */
.texto pre.codigo[data-lingua]::after {
  content: attr(data-lingua);
  position: absolute;
  top: 8px; right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--codigo-comentario);
}

.capa--pagina { padding-bottom: 8px; }