/* =========================================================================
   Liberados (site) e interface local do garimpo

   Mobile primeiro: as regras base valem para telas pequenas e os @media
   (min-width) acrescentam para telas maiores.

   Tipografia em rem para respeitar o tamanho de fonte do navegador, alvos de
   toque de 44px, e nenhuma informacao transmitida so por cor.
   ========================================================================= */

:root {
  /* Calma japonesa: mesa cinza fria, folha clara, tinta sumi e um carimbo
     vermelho (shu) so para o que esta livre. A acao e tinta, nao cor: o
     botao cheio e escuro, e o unico acento do site e o carimbo. Os nomes
     dos tokens ficam (azul = acao, verde = livre...) para nao reescrever
     cada componente; o valor e que mudou. Contraste conferido em 30/09/2026. */
  --fundo: #eceef0;          /* a mesa */
  --papel: #f8f9fa;          /* a folha */
  --borda: #d3d7db;          /* o fio */
  --texto: #1d2125;          /* tinta sumi: 13,9:1 sobre a mesa */
  --suave: #575e65;          /* 5,7:1 sobre a mesa, 6,2:1 sobre a folha */
  --azul: #1d2125;           /* a acao e a propria tinta */
  --verde: #b3362b;          /* carimbo shu (livre): 5,2:1 sobre a mesa */
  --verde-claro: #f6e4e1;
  --ambar: #7f5a12;          /* ocre (disputa): 5,4:1 */
  --ambar-claro: #f3ead7;
  --roxo: #33497a;           /* indigo (leilao): 7,6:1 */
  --roxo-claro: #e6eaf3;
  --vermelho: #7a2222;       /* alerta e erro, mais escuro que o carimbo */
  --vermelho-claro: #f3e2e0;
  --sobre-azul: #f8f9fa;     /* texto sobre a acao */
  --borda-campo: #7a8189;    /* contorno de campo, 3,4:1 com a mesa */

  --toque: 2.75rem;          /* 44px: alvo minimo de toque */
  /* Dois tamanhos de letra pequena e nenhum abaixo deles (29/09/2026).
     Eram onze valores soltos entre 11 e 13,8px, e no celular 70% das
     letras da pagina inicial ficavam abaixo de 14px: quem abriu num
     celular leu "pequeno e apagado". Mini e so para etiqueta e rodape de
     grafico; todo texto de ler (ajuda, idade, aviso, legenda) usa apoio. */
  --letra-mini: 0.8125rem;   /* 13px */
  --letra-apoio: 0.875rem;   /* 14px */
  /* Uma familia so, com o monoespacado reservado ao que e registro: o
     numero do ticket, a data crua, o nome do dominio dentro do texto (na
     lista, desde 29/09/2026, o nome vai na fonte do site; ver .dominio). O site
     troca --fonte pela Archivo em site_modelo/extra.css; o app
     local segue na fonte do sistema. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Tres raios, em vez dos cinco valores soltos que existiam: campo e
     etiqueta, cartao e painel, dialogo. */
  --raio-p: 0.1875rem;      /* 3px: carimbo, code */
  --raio: 0.25rem;          /* 4px: folha, campo, botao */
  --raio-g: 0.375rem;       /* 6px: dialogo */
  /* A unica sombra do site, so no que flutua de verdade (dialogo e
     cabecalho colado): cartao com sombra vira kit de SaaS. */
  --sombra: 0 1px 2px rgba(20, 24, 28, 0.05), 0 10px 28px rgba(20, 24, 28, 0.10);
  --gap: 0.625rem;
}

/* ------------------------------------------------------------------ tema

   Tres estados, nao dois: claro, escuro e "segue o sistema", que e o padrao.
   Um interruptor binario tiraria do usuario a preferencia que ele ja
   configurou no aparelho.

   A paleta escura aparece duas vezes de proposito. Daria para escrever uma
   vez so com light-dark(), mas essa funcao so existe em navegador de 2024
   para ca, e num navegador mais velho a pagina ficaria sem cor nenhuma. Como
   o link e para compartilhar, o custo de repetir 15 linhas e menor que o de
   quebrar para quem abrir de um aparelho antigo.

   O :not([data-tema="claro"]) e o que permite escolher claro mesmo com o
   sistema no escuro.                                                      */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #16181b;
    --papel: #1e2125;
    --borda: #33373c;
    --texto: #e8eaed;
    --suave: #a3aab2;         /* 7,6:1 sobre a mesa escura */
    --azul: #e8eaed;
    --verde: #f07a6c;
    --verde-claro: #3a1f1c;
    --ambar: #d9b36a;
    --ambar-claro: #33291a;
    --roxo: #9fb3e0;
    --roxo-claro: #1f2638;
    --vermelho: #f0a39a;
    --vermelho-claro: #3a2220;
    --sobre-azul: #16181b;
    --borda-campo: #7c838b;   /* 4,6:1 sobre a mesa escura */
  }
}

:root[data-tema="escuro"] {
  --fundo: #16181b;
  --papel: #1e2125;
  --borda: #33373c;
  --texto: #e8eaed;
  --suave: #a3aab2;     /* 7,6:1 sobre a mesa escura */
  --azul: #e8eaed;
  --verde: #f07a6c;
  --verde-claro: #3a1f1c;
  --ambar: #d9b36a;
  --ambar-claro: #33291a;
  --roxo: #9fb3e0;
  --roxo-claro: #1f2638;
  --vermelho: #f0a39a;
  --vermelho-claro: #3a2220;
  --sobre-azul: #16181b;
  --borda-campo: #7c838b;   /* 4,6:1 sobre a mesa escura */
}

/* avisa o navegador para pintar scrollbar, formulario e menu de contexto
   no tom certo */
:root { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { color-scheme: dark; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  background: var(--fundo);
  color: var(--texto);
}

/* Link sem cor propria segue o tema. Sem isto o "por ramo" dos passos e os
   links do dialogo da ficha (fora da .prosa) saiam no azul padrao do
   navegador (#0000EE, roxo depois de visitado), fora do sistema e do tema
   escuro. Classe vence elemento: componente com cor propria continua
   mandando. */
a { color: var(--azul); text-underline-offset: 0.18em; }

/* O que o navegador desenha tambem leva o tema: selecao de texto e cursor
   no azul da acao. A selecao so dentro do @supports: com var() a declaracao
   passa no parse, e num navegador sem color-mix() ela vira transparent na
   hora de calcular, e a selecao some (iOS 15, Chrome antes do 111). */
@supports (color: color-mix(in srgb, red, red)) {
  ::selection { background: color-mix(in srgb, var(--azul) 24%, transparent); }
}
input, textarea { caret-color: var(--azul); }

.escondido { display: none !important; }
.espacador { flex: 1; }

/* so para leitor de tela: usado onde a cor sozinha nao basta */
.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* foco sempre visivel; nunca outline:none sem substituto */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--raio);
}

/* Primeiro parada de Tab em toda pagina, so no site: sem isso, quem usa
   so o teclado passa pelas 8 abas e o botao de tema antes do conteudo. */
.pular {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 0.75rem;
  background: var(--papel);
  color: var(--texto);
  border: 2px solid var(--azul);
  border-radius: var(--raio);
  text-decoration: none;
}
.pular:focus { top: 0.5rem; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- cabecalho

   No celular sao duas linhas e so: marca + idade + tema em cima, abas
   embaixo. Antes a contagem com data completa ("13.777 dominios ·
   11/09/2026 06:31") nao cabia ao lado do nome e empurrava tudo para uma
   terceira linha. A contagem ja esta no cartao "Todos verificados" e a data
   completa no rodape e no title; aqui fica so a idade, que e o que muda a
   decisao.

   Fixo no topo so em tela larga: no celular, 100px presos em cima de uma
   tela de 700px custavam um sexto da lista o tempo todo.                 */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--gap);
  padding: 0.375rem 1rem 0;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  position: relative;
  z-index: 10;
}

header h1, .marca-nome {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* No site a marca e um link para a raiz, nao o h1: cada pagina tem o seu */
a.marca-nome { color: inherit; text-decoration: none; }
a.marca-nome:hover { color: var(--azul); }
/* O sufixo no mesmo desenho dos dominios da tabela: e um pedaco de nome de
   dominio, e a pagina inteira escreve dominio em monoespacada. */
header .br {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 0.86em;
  color: var(--azul);
  margin-left: 0.04em;
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  min-width: 0;
}
.carimbo {
  font-size: var(--letra-mini);
  color: var(--suave);
  white-space: nowrap;
}
/* Nas ultimas 48 h o prazo e a noticia; em tela estreita ele toma o lugar
   da idade em vez de quebrar a linha. */
@media (max-width: 26rem) {
  .cabecalho-acoes:has(.prazo:not(.escondido)) .carimbo { display: none; }
}

/* min-height: o rodape nasce abaixo da dobra. Sem isso ele aparecia colado
   nos cartoes e descia quando a tabela chegava, e o Lighthouse contava. */
main {
  max-width: 75rem;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100dvh;
}

@media (min-width: 48rem) {
  header {
    padding: 0.625rem 1.25rem;
    position: sticky;
    top: 0;
  }
  main { padding: 1.25rem; }
}

/* ---------------------------------------------------------------- botoes */
button, .botao-link {
  font: inherit;
  font-size: 0.875rem;
  min-height: var(--toque);
  padding: 0.5rem 0.875rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--papel);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:hover, .botao-link:hover { border-color: var(--suave); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primario { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
button.primario:hover { filter: brightness(1.08); }
/* Sem uso no site hoje (so .aviso.perigo, que nao e botao); no escuro
   #fff sobre --vermelho da 2,1:1. Se entrar um dia, precisa de um token
   como --sobre-azul, nao deste #fff fixo. */
button.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
button.discreto { background: transparent; color: var(--suave); }
button.discreto:hover { color: var(--texto); }

/* ------------------------------------------------------------- progresso */
.progresso {
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  padding: 0.625rem 1rem;
  position: sticky;
  top: 3.5rem;
  z-index: 9;
}
.barra {
  height: 0.375rem;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
#barra-preenche {
  height: 100%;
  width: 0;
  background: var(--azul);
  transition: width 0.3s;
}
#barra-preenche.indeterminado {
  background: repeating-linear-gradient(
    90deg, var(--azul) 0 0.875rem, transparent 0.875rem 1.75rem);
  animation: desliza 0.8s linear infinite;
}
@keyframes desliza { to { background-position: 1.75rem 0; } }

.progresso-texto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  font-size: var(--letra-apoio);
  margin-top: 0.375rem;
}
.progresso-texto span { color: var(--suave); }

/* --------------------------------------------------------------- cartoes */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--gap);
}
.cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.1875rem;
  padding: 0.9375rem 0.875rem 1rem;
  text-align: left;
  min-height: 5.5rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--papel);
}
.cartao:hover { border-color: var(--azul); }
.cartao[aria-pressed="true"] {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.cartao .numero {
  /* O numero e a coisa com voz alta da pagina: tudo em volta fica quieto */
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cartao .titulo { font-size: var(--letra-apoio); font-weight: 600; letter-spacing: -0.005em; }
.cartao .ajuda { font-size: var(--letra-apoio); color: var(--suave); line-height: 1.45; }
.cartao.destaque { background: var(--verde-claro); }
.cartao.destaque .numero, .cartao.bom .numero { color: var(--verde); }
.cartao.alerta .numero { color: var(--ambar); }
.cartao.leilao .numero { color: var(--roxo); }
.cartao.neutro .numero { color: var(--suave); }
/* Cartao vazio continua no lugar (a ordem ensina o que vale mais), mas sem o
   fundo verde de destaque: zero joias nao e destaque. */
.cartao.zerado { background: var(--papel); }
.cartao.zerado .numero { color: var(--suave); }

/* A explicacao do cartao escolhido: so no celular, onde ela sai de dentro
   dos cartoes. */
.explica-filtro { display: none; }

@media (max-width: 40rem) {
  .cartoes { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .cartao { min-height: 0; padding: 0.5rem 0.625rem; gap: 0; }
  .cartao .numero { font-size: 1.35rem; }
  .cartao .titulo { font-size: var(--letra-mini); line-height: 1.25; }
  .cartao .ajuda { display: none; }
  .explica-filtro {
    display: block;
    margin: 0.5rem 0.125rem 0;
    font-size: var(--letra-apoio);
    line-height: 1.5;
    min-height: 1.5em;        /* chega com o JSON; sem reserva, empurrava tudo */
    color: var(--texto);
  }
}
@media (min-width: 22rem) and (max-width: 40rem) {
  .cartoes { grid-template-columns: repeat(3, 1fr); }
}

/* Altura reservada: o texto chega depois do dados.json, e crescer de zero
   para tres linhas empurrava os filtros e a tabela (CLS 0,56 no
   Lighthouse). A reserva cobre o texto na largura tipica de cada faixa. */
.rodape-painel {
  font-size: var(--letra-apoio);
  line-height: 1.5;
  color: var(--suave);
  margin: 0.625rem 0.125rem 0;
  min-height: 6em;            /* 4 linhas no celular */
}
@media (min-width: 48rem) {
  .rodape-painel { min-height: 3em; }
}

/* ------------------------------------------------------------- controles */
#controles { margin: 1.25rem 0 0.875rem; }
.linha {
  display: flex;
  gap: var(--gap);
  align-items: center;
  flex-wrap: wrap;
}
.linha.secundaria { margin-top: 0.625rem; }

#busca {
  flex: 1 1 12rem;
  font: inherit;
  font-size: 1rem;           /* 16px evita o zoom automatico no iOS */
  min-height: var(--toque);
  padding: 0.5rem 0.75rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda-campo);
  background: var(--papel);
  color: var(--texto);
}
select, input[type=number], textarea {
  font: inherit;
  font-size: 1rem;
  min-height: var(--toque);
  padding: 0.45rem 0.6rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--papel);
  color: var(--texto);
}
/* so o select e campo de busca: input[number] e textarea nao foram
   auditados e a borda decorativa (--borda) segue certa para eles */
select { border-color: var(--borda-campo); }
/* No computador o seletor nao encolhe: cortava o proprio rotulo
   ("Ordem: relevânc"). No celular a grade de duas colunas manda. */
@media (min-width: 40.0625rem) {
  #controles select { flex: 0 0 auto; }
}
textarea {
  width: 100%;
  min-height: 4.5rem;
  font-family: var(--fonte-mono);
  font-size: var(--letra-apoio);
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--toque);
  font-size: var(--letra-apoio);
  color: var(--suave);
  cursor: pointer;
}
.checkbox input { width: 1.1rem; height: 1.1rem; }
.titulo-lista { font-size: 0.875rem; font-weight: 600; }

/* No celular os seletores eram quatro linhas empilhadas de largura
   irregular. Em grade de duas colunas viram duas linhas alinhadas; a busca
   e o que se usa mais, fica com a linha inteira. */
@media (max-width: 40rem) {
  #controles { margin-top: 1rem; }
  #controles .linha:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  #controles .linha:first-child > #busca { grid-column: 1 / -1; }
  /* quinto seletor (situacao, so em lista mista): linha inteira, nao orfao */
  #controles .linha:first-child > #situacao { grid-column: 1 / -1; }
  /* 16px, igual a caixa com busca do site: abaixo disso o iOS da zoom ao tocar */
  #controles select { width: 100%; min-width: 0; font-size: 1rem; }
  #controles .checkbox { grid-column: auto; }
}

.avancado summary {
  cursor: pointer;
  font-size: var(--letra-apoio);
  color: var(--suave);
  min-height: var(--toque);
  display: flex;
  align-items: center;
}
.painel-avancado {
  margin-top: 0.625rem;
  padding: 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  max-width: 29rem;
}
.painel-avancado label { font-size: var(--letra-apoio); color: var(--suave); }
.painel-avancado input[type=number] { width: 5.5rem; }
.painel-avancado hr {
  border: 0;
  border-top: 1px solid var(--borda);
  width: 100%;
  margin: 0.2rem 0;
}

/* ------------------------------------------------------------- novidades */
.novidades {
  background: var(--ambar-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.novidades h2 { font-size: 0.875rem; margin: 0 0 0.375rem; }
.novidades ul { margin: 0; padding-left: 1.1rem; font-size: var(--letra-apoio); }

/* ---------------------------------------------------------------- tabela */
.rolagem { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
th {
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--suave);
  background: var(--fundo);
}
/* No computador a linha ganha respiro (a lista parece escolhida, nao
   planilha); no celular a densidade continua, que e o que deixa ver mais
   nomes por tela. */
@media (min-width: 48rem) {
  th, td { padding: 0.6875rem 0.875rem; }
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fundo); }
.num { text-align: right; }
td.num { font-variant-numeric: tabular-nums; }
.col-marca { width: 2.75rem; }

/* O nome na lista sai na fonte do site, em 600 (29/09/2026). No mono do
   sistema (Menlo, SF Mono, o do Android) nao existe o 500 que se pedia, e
   o nome, que e o que se veio ler, era a letra mais fina da linha. */
.dominio {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  /* break-word, nao break-all: break-all zera a largura minima do texto, e a
     tabela automatica espremia a coluna ate cortar "mmv.com.b|r" com a linha
     sobrando. break-word so quebra quando o nome inteiro nao cabe. */
  overflow-wrap: break-word;
}
.dominio a { color: inherit; text-decoration: none; }
.dominio a:hover { text-decoration: underline; }
.porque { font-size: var(--letra-apoio); color: var(--suave); }

.selo {
  display: inline-block;
  font-size: var(--letra-mini);
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.selo.sem_competicao { background: var(--verde-claro); color: var(--verde); }
.selo.disputado { background: var(--ambar-claro); color: var(--ambar); }
.selo.leilao { background: var(--roxo-claro); color: var(--roxo); }
.selo.livre { background: var(--verde-claro); color: var(--verde); }
.selo.registrado, .selo.desconhecido {
  background: var(--fundo);
  color: var(--suave);
  border-color: var(--borda);
}
.selo.erro { background: var(--vermelho-claro); color: var(--vermelho); }

/* "N links": etiqueta contornada e neutra (nao e convite nem situacao);
   com link de site muito citado, contorno grosso e letra forte. */
.pilula-links {
  display: inline-block;
  font-family: var(--fonte);
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--suave);
  background: var(--fundo);
  border: 1px solid var(--borda);
  padding: 0.05rem 0.375rem;
  border-radius: 0.25rem;
  margin-left: 0.375rem;
  vertical-align: middle;
  white-space: nowrap;
}
.pilula-links.citado {
  color: var(--texto);
  border: 2px solid var(--borda-campo);
  font-weight: 700;
}
/* e botao (abre quem aponta): desfaz a altura e o padding de botao, como o
   button.competindo-botao, para a linha nao dobrar de altura */
button.pilula-links {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;              /* 24px: o alvo minimo do WCAG 2.2 AA */
  line-height: 1.3;
  cursor: pointer;
}
@media (hover: hover) {
  button.pilula-links:hover { border-color: var(--azul); color: var(--azul); }
}
button.pilula-links:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* O dialogo de quem aponta (lista/links.js). Tres faixas: cabecalho, lista
   e acoes. So a do meio rola, entao "Fechar" e a ficha ficam a vista com
   milhares de nomes, e nao ha rolagem dentro de rolagem. display: flex so
   com [open]: sem o atributo, o navegador esconde o dialogo por display. */
/* O topo e fixo, como o da ficha (extra.css, .dialogo-ficha): o de um
   dialogo cheio (44rem) centrado. Quando a lista demora e ele abre com
   "Carregando", so o rodape desce; centrado, ele pulava de baixo e pequeno
   para o topo da tela (medido no celular emulado em 04/10/2026). */
.dialogo.dialogo-links {
  --links-topo: max(1rem, calc(50dvh - 22rem));
  width: min(40rem, calc(100vw - 2rem));
  margin-top: var(--links-topo);
  margin-bottom: auto;
  max-height: min(44rem, calc(100dvh - var(--links-topo) - 1rem));
}
.dialogo-links[open] { display: flex; flex-direction: column; }
.dialogo-disputa.dialogo-links .dialogo-corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}
.links-cabeca { padding: 1.125rem 1.25rem 0.875rem; border-bottom: 1px solid var(--borda); }
.dialogo-links .links-cabeca h2 { margin: 0 0 0.25rem; overflow-wrap: anywhere; }
/* o titulo recebe o foco inicial so para o leitor de tela; nao e controle,
   como o main:focus acima */
.dialogo-links .links-cabeca h2:focus { outline: none; }
.dialogo-links .links-cabeca .disputa-resumo { margin: 0; }
.links-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.25rem 1rem;
}
.dialogo-links .links-fonte { margin: 1.25rem 0 0; }
.dialogo-disputa .links-acoes {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--borda);
}

/* Os grupos de quem aponta, iguais no dialogo e na ficha (ficha.js). A
   lista e uma grade, nao `columns`: coluna de texto desalinha a segunda
   coluna quando o primeiro item tem margem. O fio entre as linhas separa
   nomes compridos que quebram. Muito citado pesa mais, plataforma fica
   apagada: o peso diz o que o rotulo do grupo ja disse. Tudo sob
   .links-grupo, para vencer o .prosa ul/li/p da ficha e o .dialogo p. */
.links-grupo { margin: 1.125rem 0 0; }
.links-grupo .links-titulo { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.125rem; }
.links-grupo .links-titulo span { color: var(--suave); font-weight: 500; }
.links-grupo .links-explica { font-size: var(--letra-apoio); color: var(--suave); margin: 0 0 0.25rem; }
.links-grupo .links-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  column-gap: 1.5rem;
  font-size: 0.9375rem;
}
.links-grupo .links-lista li {
  margin: 0;
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--borda);
  overflow-wrap: anywhere;
}
.links-grupo .links-lista.citados li { font-weight: 600; }
.links-grupo .links-lista.plataformas li { color: var(--suave); }

/* A cor sozinha nao pode carregar o significado: cada nivel tem
   forma propria (preenchido / contornado / contornado grosso) e um texto
   so para leitor de tela. */
.competindo {
  display: inline-block;
  min-width: 2rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--raio);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.competindo-zero { background: var(--verde-claro); color: var(--verde); }
.competindo-pouco {
  color: var(--ambar);
  border: 1px solid currentColor;
}
.competindo-muito {
  color: var(--vermelho);
  border: 2px solid currentColor;
}
.competindo-nulo { color: var(--suave); }

.marcador {
  background: none;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  min-height: var(--toque);
  min-width: var(--toque);
  padding: 0;
  color: var(--borda);
}
.marcador[aria-pressed="true"] { color: var(--ambar); }

.pilula-elegivel {
  display: inline-block;
  font-family: var(--fonte);
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--roxo);
  background: var(--roxo-claro);
  padding: 0.05rem 0.375rem;
  border-radius: 0.25rem;
  margin-left: 0.375rem;
  vertical-align: middle;
  white-space: nowrap;
}
.aviso-marca { color: var(--vermelho); font-size: var(--letra-apoio); }

/* O .com do mesmo nome (pontocom.js). A pilula existe em toda linha, mas so
   aparece com o interruptor "Mostrar o .com" ligado: desligado, a lista fica
   como sempre foi. A cor nao carrega o estado sozinha: livre e
   preenchido com visto, a venda e preenchido, caindo e tracejado com seta,
   tem dono e so texto, e o texto diz tudo. 24px de altura, o alvo minimo,
   sem dobrar a linha da tabela; sem margem, porque quem separa do nome e um
   espaco no HTML, que some se a pilula quebrar de linha. */
:root:not(.com-ligado) .pontocom { display: none; }
button.pontocom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: 0 0.45rem;
  font-family: var(--fonte);
  font-size: var(--letra-mini);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--suave);
  background: transparent;
}
@media (hover: hover) {
  button.pontocom:hover { border-color: var(--suave); }
}
/* "tem dono" era so texto, sem borda: parecia rotulo, nao algo que abre. O
   contorno fino e o mesmo das outras pilulas neutras. */
button.pontocom-com_dono { border-color: var(--borda); }

/* Pilula que abre detalhe (a ficha do .com, a lista de quem aponta): uma
   seta fina no fim diz "toque para ver" sem cara de botao de formulario.
   Feita de borda, nao de caractere, para ter a mesma espessura em qualquer
   fonte e tema; so decora (o texto para leitor de tela ja diz que abre). */
button.pontocom::after, button.pilula-links::after {
  content: "";
  flex: none;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
}
@media (hover: hover) {
  button.pontocom:hover::after, button.pilula-links:hover::after { opacity: 0.9; }
}
button.pontocom:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pontocom-espera { color: var(--suave); font-style: italic; }
/* com o seletor de button: sem ele, o transparente de button.pontocom ganhava
   e o "livre" saia sem o fundo que o distingue */
button.pontocom-livre { background: var(--verde-claro); color: var(--verde); }
button.pontocom-a_venda { background: var(--ambar-claro); color: var(--ambar); }
button.pontocom-caindo { border-style: dashed; border-color: currentColor; color: var(--ambar); }
button.pontocom-erro { border-style: dashed; border-color: currentColor; color: var(--vermelho); }

/* O interruptor: um so controle na barra da lista, com um trilho que diz
   ligado/desligado pela forma (a bolinha muda de lado), nao so pela cor. */
button.alternador-com {
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  font-size: var(--letra-apoio);
  font-weight: 600;
  color: var(--texto);
  border-radius: 999px;
}
button.alternador-com::before {
  content: "";
  width: 1.6rem;
  height: 0.95rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--suave);
  background: radial-gradient(circle at 0.45rem 50%, var(--suave) 0.3rem, transparent 0.32rem);
}
button.alternador-com[aria-pressed="true"] { border-color: var(--azul); color: var(--azul); }
button.alternador-com[aria-pressed="true"]::before {
  border-color: var(--azul);
  background: var(--azul) radial-gradient(circle at calc(100% - 0.45rem) 50%, var(--papel) 0.3rem, transparent 0.32rem);
}
/* sempre no fluxo, mesmo vazia: regiao role=status que nasce de display:none
   junto com o texto costuma nao ser anunciada */
.pontocom-status { font-size: var(--letra-apoio); color: var(--suave); margin: 0.25rem 0 0; min-height: 1.2em; }
/* o que o filtro .com escolhido quer dizer (lista/tabela.js, pintarExplicaCom) */
.explica-com { font-size: var(--letra-apoio); color: var(--suave); margin: 0.25rem 0 0; }
.explica-com p { margin: 0 0 0.25rem; }
.explica-com strong { color: var(--texto); font-weight: 600; }
.explica-com[hidden] { display: none; }
/* "ver a ficha de fulano.com", na ficha do dominio (site_modelo/ficha.js):
   um link em forma de botao, como os outros links de texto da ficha */
.ficha-com-botao {
  background: none; border: 0; padding: 0; min-height: var(--toque);
  font: inherit; font-size: var(--letra-apoio); color: var(--texto);
  text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.ficha-com-botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* A ficha do .com: tres faixas, como o dialogo de quem aponta. Largo o
   bastante para "oculto por um servico de privacidade" caber numa linha;
   a ficha em linhas com fio, rotulo apagado e valor na cor do texto. */
.dialogo.dialogo-pontocom {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100dvh - 2rem));
}
/* cabeca e acoes fixas, so a ficha rola: no celular a ficha passa da tela e
   o Fechar ficava depois da nota, fora da vista */
.dialogo-pontocom[open] { display: flex; flex-direction: column; }
.dialogo-disputa.dialogo-pontocom .dialogo-corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}
.pontocom-cabeca h2 { margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.pontocom-cabeca h2:focus { outline: none; }
.pontocom-cabeca .pontocom-resumo { font-size: 0.9375rem; margin: 0; }
.pontocom-cabeca .disputa-status { margin: 0.25rem 0 0; }
.pontocom-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 1.25rem 1rem;
}
.pontocom-ficha {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) 1fr;
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
}
.pontocom-ficha:empty, .dialogo-pontocom .disputa-status:empty { display: none; }
.pontocom-ficha dt, .pontocom-ficha dd {
  margin: 0;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--borda);
}
.pontocom-ficha dt { color: var(--suave); padding-right: 1.25rem; }
.pontocom-ficha dd { overflow-wrap: anywhere; }
.pontocom-ficha > :nth-last-child(-n + 2) { border-bottom: 0; }
.pontocom-fonte { margin: 0; }
/* as acoes numa linha: os links de texto a esquerda, Fechar a direita */
.dialogo-disputa .pontocom-acoes { justify-content: space-between; }
.pontocom-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.pontocom-link {
  font-size: var(--letra-apoio);
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  padding: 0.375rem 0;
}
.pontocom-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* o .com livre: "Registrar em" e os registradores, numa linha que quebra */
.pontocom-registrar { flex: 1 1 100%; align-items: baseline; gap: 0.25rem 1rem; }
.pontocom-registrar-rotulo { font-size: var(--letra-apoio); color: var(--suave); }
@media (max-width: 30rem) {
  /* no celular os dois links e o Fechar nao cabem numa linha: duas linhas de
     proposito, os links repartindo a primeira e o Fechar inteiro embaixo,
     em vez de um Fechar solto a esquerda */
  .pontocom-links { flex: 1 1 100%; justify-content: space-between; }
  .pontocom-registrar { justify-content: flex-start; }
  .pontocom-registrar-rotulo { flex: 1 1 100%; }
  .dialogo-disputa .pontocom-acoes .discreto { flex: 1 1 100%; }
  .pontocom-ficha { grid-template-columns: 1fr; }
  .pontocom-ficha dt { padding: 0.5rem 0 0; border-bottom: 0; }
  .pontocom-ficha dd { padding-top: 0.125rem; }
  .pontocom-ficha > dt:nth-last-child(2) { border-bottom: 0; }
}

.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--suave); }
.paginacao {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 0 1.875rem;
  font-size: var(--letra-apoio);
  color: var(--suave);
}

/* ------------------------------------------------ tabela vira lista no
   celular. Seis colunas em 375px viravam rolagem horizontal a cada linha.
   Trocar o display de elementos de tabela apaga a semantica implicita, por
   isso o HTML declara role="table"/"row"/"cell" explicitamente. */
@media (max-width: 40rem) {
  .rolagem { overflow-x: visible; }

  table { border-radius: var(--raio); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table, tbody, tr, td { display: block; }

  tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "marca dominio  competindo"
      "marca situacao competindo"
      "marca porque   acao";
    align-items: center;
    gap: 0.2rem 0.625rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--borda);
  }
  tbody td { border: 0; padding: 0; }

  td.col-marca      { grid-area: marca; }
  /* min-width 0 deixa a celula da grade encolher; sem isso um nome longo
     alargaria o cartao alem da tela em vez de quebrar */
  td.dominio        { grid-area: dominio; min-width: 0; overflow-wrap: anywhere; }
  td.col-situacao   { grid-area: situacao; }
  td.col-competindo { grid-area: competindo; text-align: right; }
  /* a nota some: e apoio de ordenacao, e a ordenacao continua no seletor */
  td.col-nota       { display: none; }
  td.porque         { grid-area: porque; }
  td.col-acao       { grid-area: acao; text-align: right; }

  .paginacao button { flex: 1; }
}

/* ------------------------------------------------------- regua da rodada

   A rodada e uma janela de 7 dias com prazo. A regua mostra onde estamos
   dentro dela: preenche da esquerda para a direita conforme o tempo corre.
   Fica colada na base do cabecalho, entao nao ocupa altura nenhuma.

   Sem animacao continua de proposito: a largura e calculada uma vez no
   carregamento. Um relogio rodando o dia todo custaria bateria para
   informar algo que muda de hora em hora.                                */

.regua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;              /* cobre a borda do cabecalho */
  height: 3px;
  background: var(--borda);
}

.regua span {
  display: block;
  height: 100%;
  width: var(--decorrido, 0%);
  background: var(--verde);
  /* a ponta arredondada e o unico enfeite: marca onde "agora" esta */
  border-radius: 0 999px 999px 0;
}

.regua[data-fase="fim"] span { background: var(--ambar); }
.regua[data-fase="assentando"] span { background: var(--ambar); }
.regua[data-fase="entre"] span { background: var(--borda); }

/* O prazo so vira texto quando e noticia: nas ultimas 48h e depois do
   fechamento. Antes disso a regua ja diz o que precisa. */
.prazo {
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--ambar);
  white-space: nowrap;
}
.prazo[data-fase="entre"] { color: var(--suave); font-weight: 500; }


/* ------------------------------------------------------- botao de tema

   Um botao so, que cicla entre sistema, claro e escuro. Tres celulas lado a
   lado deixariam o cabecalho apertado no celular, onde ele ja carrega
   titulo, abas e contagem.

   O icone mostra o estado atual; o aria-label diz o estado E o que o clique
   faz, porque so o desenho nao conta isso.                               */

.tema {
  min-width: var(--toque);
  padding: 0.4rem;
  color: var(--suave);
}
.tema:hover { color: var(--texto); }
.tema svg {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* sem atributo = seguindo o sistema */
:root:not([data-tema]) .tema .icone-sistema { display: block; }
:root[data-tema="claro"] .tema .icone-claro { display: block; }
:root[data-tema="escuro"] .tema .icone-escuro { display: block; }

/* ---- quem disputa (web/disputa.js; usado pelo site e pelo app local) ---- */
.dialogo-disputa { border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 0;
  box-shadow: var(--sombra);
  max-width: min(44rem, calc(100vw - 2rem)); width: 100%; background: var(--fundo); color: var(--texto); }
.dialogo-disputa::backdrop { background: rgba(15, 23, 32, 0.45); }
.dialogo-disputa .dialogo-corpo { padding: 1.125rem 1.125rem 0.75rem; }
.dialogo-disputa h2 { font-size: 1.05rem; margin: 0 0 0.375rem; }
.disputa-resumo, .disputa-status, .disputa-nota { font-size: var(--letra-apoio); color: var(--suave); margin: 0 0 0.5rem; }
.disputa-status { color: var(--texto); min-height: 1.2em; }
.disputa-tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.25rem 0 0.5rem; }
.disputa-tabela th, .disputa-tabela td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--borda); }
.disputa-tabela .num { text-align: right; }
.disputa-pendente { color: var(--suave); }
.disputa-acoes { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
/* .conferir (extra.css) poe display: inline-block, que vence o [hidden] do
   navegador: sem isto o "carregar mais 0" apareceria */
.dialogo-disputa [hidden] { display: none; }
/* o mesmo para o "conferir mais" do filtro ".com agora" (pontocom.js) */
.pontocom-mais[hidden] { display: none; }

/* A contagem clicavel: a mesma pilula de .competindo (cor, borda, largura
   minima), com um icone de pessoas que diz "toque para ver". Desfaz o que
   o estilo base de button impoe (44px de altura, padding de botao, fundo
   de papel) para a linha da tabela nao dobrar de altura. */
button.competindo-botao {
  min-height: 1.75rem;
  min-width: 2.75rem;
  padding: 0.1rem 0.45rem;
  gap: 0.3rem;
  font-size: inherit;
  font-weight: 650;
  line-height: 1.2;
  background: transparent;
  vertical-align: middle;
}
button.competindo-botao.competindo-pouco { border: 1px solid currentColor; }
button.competindo-botao.competindo-muito { border: 2px solid currentColor; }
button.competindo-botao.competindo-pouco:hover { background: var(--ambar-claro); border-color: currentColor; }
button.competindo-botao.competindo-muito:hover { background: var(--vermelho-claro); border-color: currentColor; }
button.competindo-botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.icone-disputa {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.75;
}
button.competindo-botao:hover .icone-disputa { opacity: 1; }

/* ---- ritmo da rodada (site) ---- */
.ritmo { margin: 0.5rem 0 0; color: var(--azul); }
.ritmo figcaption { font-size: var(--letra-apoio); color: var(--suave); margin-bottom: 0.25rem; }
.ritmo svg { display: block; width: 100%; max-width: 32rem; height: 60px; }


/* ------------------------------------------------------------- tipografia

   Archivo (SIL OFL, copia e licenca em site_modelo/fontes/), servida do
   proprio site: a CSP e `font-src 'self'` e nada aqui chama um terceiro.
   Variavel de 400 a 700, uma familia so, de desenho firme: o traco
   aguenta o corpo em 450 no celular sem sair apagado. O monoespacado do
   sistema fica com o que e registro (o ticket, a data crua). O app local
   (web/style.css sozinho) segue na fonte do sistema. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
:root {
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { font-weight: 450; }
/* No computador tudo cresce 12,5% (base de 16 para 18px): quase tudo e rem,
   entao letra, botoes e espacos sobem juntos, como um zoom. Em porcentagem
   para respeitar o tamanho que a pessoa escolheu no navegador; os pontos de
   quebra em rem seguem medidos pela base do navegador. O celular fica. */
@media (min-width: 64rem) { html { font-size: 112.5%; } }

/* Estilos exclusivos do site publicado: navegacao, prosa das paginas de
   texto e rodape.

   O resto vem de web/style.css, que os dois compartilham, e
   exportar_site.py junta os dois na hora de gerar: uma copia manual
   ficaria defasada assim que alguem esquecesse de refaze-la. */

/* Faixa de abas rolavel na horizontal.

   Com `flex-wrap: wrap`, no celular as abas cairiam em 2x2: um bloco alto
   que empurra o conteudo para baixo da dobra so para mostrar navegacao.
   Nome comprido ("Como selecionamos") ao lado de nome curto ("Insights")
   ainda deixaria as celulas de larguras diferentes, o que parece defeito.

   A faixa rolavel e o padrao de fato em celular (iOS e Android usam isso):
   uma linha so, altura fixa, cada aba do tamanho do proprio texto. A aba
   cortada na borda direita e o que avisa que ha mais — por isso `nowrap` e
   `flex: 0 0 auto`, e por isso a barra de rolagem some sem que a rolagem
   suma junto.

   `scroll-snap` deixa a parada alinhada em vez de no meio de uma palavra.
   site_modelo/tema.js rola a aba ativa para dentro da vista ao carregar a
   pagina (cada pagina ja chega com uma aba diferente marcada, porque as
   abas sao links), senao a aba aberta ficaria escondida atras da borda cortada em 5 das 8 secoes. A mascara abaixo
   esfuma a borda direita para avisar que a faixa rola mesmo quando a aba
   ativa cabe na tela. */
.abas {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.125rem;
  order: 3;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* Edge antigo */
}
.abas::-webkit-scrollbar { display: none; }
@media (max-width: 63.999rem) {
  .abas {
    /* a mascara tem de comecar exatamente onde comeca o padding reservado
       (os mesmos 2rem nos tres lugares): se ela comecasse antes, o
       degrade cairia dentro do texto da ultima aba (e o que acontece
       com 2.5rem de mascara contra 2rem de padding). */
    mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    padding-inline-end: 2rem;         /* a ultima aba fica inteira quando a faixa chega ao fim */
    scroll-padding-inline-end: 2rem;  /* mesmo valor do padding, senao o fim rolavel fica 2rem antes do fim de verdade */
  }
}

.aba {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;                     /* tamanho do texto: nem estica nem quebra */
  white-space: nowrap;
  scroll-snap-align: start;
  border: 0;
  background: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--raio);
  color: var(--suave);
  font-weight: 600;
  font-size: 0.875rem;
  min-height: var(--toque);           /* 44px de alvo de toque, mesmo com fonte menor */
}
.aba:hover { background: var(--fundo); }
.aba[aria-current="page"] { background: var(--fundo); color: var(--texto); }
/* A ultima aba nao cabe centralizada: tema.js rola ate o fim da faixa e
   com scroll-snap-type: proximity o navegador reenquadra para a parada
   mais proxima depois da rolagem por script. Sem uma parada "end" ali, a
   proxima parada "start" disponivel e a penultima aba, e a ultima volta a
   ficar cortada pela borda direita. */
.aba:last-child { scroll-snap-align: end; }

/* Sete abas: na mesma linha da marca so a partir de 64rem, e ainda assim a
   faixa encolhe e rola em vez de empurrar o botao de tema para uma terceira
   linha (o que acontece a 880px sem isto). */
@media (min-width: 64rem) {
  .abas { order: 0; width: auto; flex: 1 1 auto; min-width: 0; margin-left: 1.25rem; }
  .aba { font-size: 0.9rem; padding: 0.5rem 0.875rem; }
}
/* Oito abas, a marca e o status da pagina inicial ("entre rodadas ·
   atualizado ha 6 min") na base de 18px do computador pedem ~1.370px: a
   1280 e 1366px o status e o botao de tema caiam numa linha propria
   (medido em 05/10/2026). Ate 1536px as abas ficam na letra de 14,4px e
   com menos respiro, e tudo cabe numa linha a partir de ~1.260px. */
@media (min-width: 64rem) and (max-width: 95.999rem) {
  .abas { margin-left: 0.75rem; }
  .aba { font-size: 0.8rem; padding: 0.5rem; }
}

/* A seta que avisa que as abas continuam (a mascara sozinha passa
   despercebida). tema.js a poe logo depois da
   faixa e a esconde com .escondido quando a faixa chega ao fim. Ela cobre
   a borda direita da faixa, que no celular e a ultima linha do cabecalho
   (order: 3; o cabecalho e position: relative ou sticky, entao serve de
   referencia): bottom e right repetem o padding do cabecalho em cada
   largura. O fundo em degrade deixa a seta legivel por cima do texto que
   a mascara ja esfuma. A partir de 64rem a faixa sobe para a linha da
   marca e a seta nao aparece. */
.abas-seta { display: none; }
@media (max-width: 63.999rem) {
  .abas-seta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 1rem;
    bottom: 0;
    width: 2.75rem;
    min-height: var(--toque);
    padding: 0 0.25rem 0.125rem 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, var(--papel) 45%);
    color: var(--texto);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .abas-seta { right: 1.25rem; bottom: 0.625rem; }
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--borda);
  font-size: var(--letra-apoio);
  color: var(--suave);
}

/* ------------------------------------------------------------------ prosa */
.prosa h1 {
  /* A mesma escala do inicio, um degrau abaixo: a pagina de texto tambem
     comeca com uma frase que se le de longe. */
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0.625rem 0 0.875rem;
  text-wrap: balance;
}
/* A data da revisao logo abaixo do titulo: calma, uma linha so, colada ao
   h1 (a margem negativa desconta o respiro de baixo dele). Na pagina de
   texto e o unico lugar visivel da data; o rodape nao a repete. */
.prosa .atualizado {
  font-size: var(--letra-mini);
  color: var(--suave);
  margin: -0.5rem 0 1rem;
}
.prosa .insight .atualizado { margin: 0.125rem 0 0.75rem; }
.prosa {
  max-width: 45rem;         /* ~65ch: limite de leitura confortavel */
  line-height: 1.65;
}
.prosa h2 {
  font-size: clamp(1.15rem, 1.02rem + 0.85vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.625rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--borda);
}
.prosa h2:first-child { border-top: 0; padding-top: 0; margin-top: 0.5rem; }
.prosa h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em;
             margin: 1.5rem 0 0.375rem; }
.prosa p { margin: 0.625rem 0; }
.prosa ul, .prosa ol { margin: 0.625rem 0; padding-left: 1.375rem; }
.prosa li { margin: 0.3rem 0; }
.prosa ul ul { margin: 0.3rem 0; }
.prosa a { color: var(--azul); }
.prosa code {
  font-family: var(--fonte-mono);
  /* 0.9em dentro de texto de 14px dava 12,6px, abaixo do piso da etiqueta;
     o teste do piso le px e nao pega em */
  font-size: max(0.9em, var(--letra-mini));
  background: var(--fundo);
  padding: 0.05rem 0.3rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  /* overflow-wrap, nao word-break: break-word. O word-break zera a largura
     minima, e numa tabela a coluna encolhia ate cortar "x.com.b|r" mesmo
     num monitor de 1000px. */
  overflow-wrap: break-word;
}
/* No celular a tabela de quatro colunas so cabe quebrando o nome
   (genericos-que-viraram-cemiterio passava 28px da tela). */
@media (max-width: 40rem) {
  .prosa .tabela-doc code { overflow-wrap: anywhere; }
}
.prosa pre {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.8rem 0.9rem;
  overflow-x: auto;
}
.prosa pre code { background: none; border: 0; padding: 0; font-size: var(--letra-apoio); }
.prosa .nota { font-size: var(--letra-apoio); color: var(--suave); }
.prosa details {
  margin: 0.75rem 0;
  border: 1px solid var(--borda);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--papel);
}
.prosa summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  min-height: var(--toque);
  display: flex;
  align-items: center;
}

.aviso {
  background: var(--ambar-claro);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ambar);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.aviso.perigo { background: var(--vermelho-claro); border-left-color: var(--vermelho); }
/* Nota que merece destaque mas nao e risco (dinheiro, penalidade, marca):
   sem cor de alerta, so a caixa. */
.aviso.nota-destaque { background: var(--papel); border-left-color: var(--borda); }
.aviso p:first-child { margin-top: 0; }
.aviso p:last-child { margin-bottom: 0; }

.tabela-doc {
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.875rem;
  border: 1px solid var(--borda);
  border-radius: 0.5rem;
  width: 100%;
}
.tabela-doc td, .tabela-doc th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
  text-align: left;
}
.tabela-doc th {
  background: var(--fundo);
  font-size: var(--letra-mini);
  text-transform: uppercase;
}
.tabela-doc tr:last-child td { border-bottom: 0; }

/* a tabela de documentacao nao vira lista: ela e curta e faz sentido em grade */
@media (max-width: 40rem) {
  .prosa .tabela-doc, .prosa .tabela-doc tbody,
  .prosa .tabela-doc tr, .prosa .tabela-doc td, .prosa .tabela-doc th {
    display: revert;
  }
  .prosa .tabela-doc thead { position: static; width: auto; height: auto; clip: auto; }
}

/* link dentro do texto que leva para outra aba */
.como-link {
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  color: var(--azul);
  font: inherit;
  text-decoration: underline;
  display: inline;
  cursor: pointer;
}
.como-link:hover { text-decoration: none; }

.cartao.livre .numero { color: var(--verde); }

/* ------------------------------------------------------- idade de cada linha

   Todo numero da tabela tem idade, e a idade fica colada no selo: um
   "sem competicao" de 30 horas nao e o mesmo fato que um de 30 minutos.
   Vencido e ao vivo tem texto proprio, nao so cor (WCAG 1.4.1). */
/* Selo, idade e botoes na mesma linha: empilhados, cada linha da tabela
   tinha tres andares e a pagina mostrava cinco nomes por tela no celular. */
.situacao-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.idade {
  font-size: var(--letra-apoio);
  color: var(--suave);
  white-space: nowrap;
}
/* sem negrito: em negrito competiria com o selo ao lado; o
   texto "a confirmar" e a cor ja dizem que a leitura e antiga */
.idade.vencida { color: var(--ambar); font-weight: 500; }
.idade.ao-vivo { color: var(--verde); font-weight: 600; }
.idade.navegador { color: var(--verde); }

/* Mudou ao ser conferido: a linha fica na lista com este texto ate a troca
   de filtro, em vez de sumir sem aviso. Texto, nao so cor (WCAG 1.4.1). */
.mudou { font-size: var(--letra-mini); color: var(--ambar); font-weight: 600; }

/* 28px de altura: acima dos 24px do alvo minimo, sem dobrar a altura da
   linha como os 44px dos botoes principais fariam numa tabela de 100 linhas */
.conferir {
  display: inline-block;
  min-height: 1.75rem;
  padding: 0.125rem 0.625rem;
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--azul);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 999px;
  cursor: pointer;
}
a.conferir { text-decoration: none; line-height: 1.5rem; }
.conferir:hover { border-color: var(--azul); }
.conferir:disabled { color: var(--suave); cursor: progress; }

/* A linha da conferencia ao vivo fica sempre reservada: ela aparece logo
   depois da carga, e aparecer do nada empurrava os filtros. */
.ao-vivo-status { min-height: 1.5em; line-height: 1.5; margin-top: 0.25rem; }

/* Largura fixa em tela larga: seletor sem largura assume a da opcao mais
   comprida, e as opcoes chegam com o JSON. O de ramo crescia ao ganhar
   "Marketing e comunicacao", jogava a caixa de risco para outra linha e
   empurrava a tabela 54px (CLS 0,3 no site publicado). So no site: a
   interface local tem opcoes mais compridas e nao carrega depois. */
@media (min-width: 40.0625rem) {
  #controles select, #controles .combo { flex: 0 0 12.5rem; width: 12.5rem; }
  /* Os filtros dividem a linha por igual: com largura fixa, o
     quinto (situacao) cairia sozinho na linha de baixo. A base e 0, nao o
     conteudo, entao a opcao comprida nao mexe na largura (sem CLS). */
  #controles .linha:first-child > .combo { flex: 1 1 0; width: auto; min-width: 10rem; }
}

/* O fim da lista numa linha so (04/10/2026): quantos por pagina a
   esquerda, a paginacao no meio, baixar a direita, tudo em texto quieto e
   sem caixa, numa grade de tres colunas (a do meio fica no centro mesmo com
   as laterais de larguras diferentes). Sem paginacao (uma pagina so), o meio
   fica vazio e as laterais nao saem do lugar. No celular a paginacao ocupa a
   linha inteira, com alvo de toque largo, e os outros dois descem lado a
   lado; "Baixar CSV" vira "CSV" (o rotulo para leitor de tela e inteiro). */
.fim-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "porpagina paginacao csv";
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 2.5rem;
  padding: 0.75rem 0;
}
.fim-por-pagina { grid-area: porpagina; justify-self: start; }
.fim-lista > .paginacao { grid-area: paginacao; }
.fim-lista > .acao-fim { grid-area: csv; justify-self: end; }

/* as tres partes falam a mesma lingua: texto de apoio em tinta, icone em
   tinta suave, alvo de 44px, sem borda nem fundo; o hover sublinha */
.fim-lista .combo-botao,
.acao-fim,
.fim-lista > .paginacao button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--toque);
  padding: 0 0.5rem;
  font: inherit;
  font-size: var(--letra-apoio);
  font-weight: 450;
  color: var(--texto);
  background: none;
  border: 0;
  border-radius: var(--raio);
  white-space: nowrap;
  cursor: pointer;
}
.fim-lista .combo-botao { padding-right: 1.75rem; margin-left: -0.5rem; }
/* o seletor do rodape tem a largura do texto: sem isso a caixa encolhia e
   cortava "50 por página" */
.fim-por-pagina .combo { width: auto; }
.fim-lista .combo-valor { flex: none; overflow: visible; text-overflow: clip; }
.acao-fim { margin-right: -0.5rem; }
.fim-lista .combo-botao:hover, .acao-fim:hover,
.fim-lista > .paginacao button:hover:not(:disabled) { background: var(--papel); }
.fim-lista :focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; }
.acao-fim svg,
.fim-lista > .paginacao svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  fill: none;
  stroke: var(--suave);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fim-lista > .paginacao { gap: 0.25rem; padding: 0; }
.fim-lista > .paginacao #info-pagina {
  padding: 0 0.5rem; color: var(--suave); font-variant-numeric: tabular-nums;
}
/* a direcao que se usa quase sempre: Proxima em 600 */
.fim-lista > .paginacao #btn-proxima { font-weight: 600; }
.fim-lista > .paginacao button:disabled { color: var(--suave); opacity: 0.55; cursor: default; }
@media (max-width: 40rem) {
  .fim-lista {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "paginacao paginacao" "porpagina csv";
    margin-bottom: 1.75rem;
  }
  .fim-lista > .paginacao { justify-content: space-between; }
  .fim-lista > .paginacao button { flex: 1; justify-content: center; border: 1px solid var(--borda); background: var(--papel); }
  .fim-lista .so-largo { display: none; }
}
/* No celular: extensao e ramo aos pares; a ordem, os dois do .com e a
   situacao (so em lista mista) na linha inteira, porque o texto deles nao
   cabe em meia linha (04/10/2026: com o .com em duas caixas, cinco
   seletores deixavam um orfao e cortavam o rotulo). Os filtros moram na
   dobra, entao a altura nao pesa. Quem esta na grade e a caixa. */
@media (max-width: 40rem) {
  #controles .linha:first-child > :is(.combo-ordem, .combo-com-agora, .combo-com, .combo-situacao) { grid-column: 1 / -1; }
}

/* Seletor com painel (todos os da lista, app.js tornarSeletor). O gatilho e
   um botao com cara de seletor; a seta e borda girada, nao imagem. */
.combo { position: relative; min-width: 0; }
.combo-botao {
  width: 100%;
  min-height: var(--toque);
  justify-content: flex-start;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--texto);
  background: var(--papel);
  text-align: left;
  border-color: var(--borda-campo);
}
.combo-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--suave);
  border-bottom: 2px solid var(--suave);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Barra de acoes da lista. Todo controle de #controles tem a altura, a
   borda, o raio e a letra dos filtros: desenhos diferentes numa linha so
   (pilula, seletor alto, botao apagado que parece desabilitado, icone
   solto) quebram em linhas tortas no celular. O que distingue e a forma: seletor tem seta a direita, acao
   tem icone a esquerda, o interruptor tem o trilho. */
#controles .acao {
  gap: 0.5rem;
  min-height: var(--toque);
  padding: 0.45rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--texto);
  background: var(--papel);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  white-space: nowrap;
}
#controles .acao:hover, #controles .combo-botao:hover { background: var(--fundo); }
#controles .acao svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: var(--suave);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aviso-da-lista:empty { display: none; }
/* O titulo da lista cede e as acoes andam juntas, alinhadas a direita: se
   nao couberem ao lado do titulo, o grupo inteiro desce, nunca um botao so.
   O status do .com so ocupa espaco quando tem o que dizer. */
#controles .linha.secundaria > .titulo-lista { flex: 1 1 14rem; min-width: 0; }
.acoes-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
#controles .pontocom-status:empty { display: none; }
.aviso-da-lista { margin: 0; align-self: center; }
/* compartilhar, no titulo da lista: texto com icone, sem caixa */
.compartilhar-lista {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--toque);
  margin: 0; padding: 0 0.25rem; border: 0; border-radius: var(--raio); background: none;
  color: var(--texto); font: inherit; font-size: var(--letra-apoio); font-weight: 600; cursor: pointer;
}
.compartilhar-lista svg {
  width: 1.0625rem; height: 1.0625rem; flex: none; fill: none; stroke: var(--suave);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.compartilhar-lista:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.compartilhar-lista:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* No celular, a mesma grade de duas colunas dos filtros: o titulo da lista
   na linha inteira, e as quatro acoes em duas linhas alinhadas. */
@media (max-width: 40rem) {
  #controles .linha.secundaria {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  #controles .linha.secundaria > .espacador { display: none; }
  #controles .acoes-lista { display: contents; }
  #controles .linha.secundaria :is(.titulo-lista, .aviso-da-lista, #btn-lista-acompanhar) { grid-column: 1 / -1; }
  #controles .linha.secundaria > .compartilhar-lista { grid-column: 1 / -1; justify-self: start; margin-top: -0.5rem; }
  #controles .linha.secundaria :is(.acao, .combo) { width: 100%; min-width: 0; justify-content: flex-start; }
  #controles .titulo-lista { font-size: 0.9375rem; padding-bottom: 0.25rem; }
}
/* Celular estreito (360px): com 16px, "Ordem: relevância" e "Extensão:
   todas" saiam cortados. Botao nao e campo de texto, entao abaixo de 16px o
   iOS nao da zoom; a caixa de busca do painel segue com 16px. */
@media (max-width: 24rem) {
  #controles :is(.combo-botao, .acao) { font-size: 0.875rem; padding-left: 0.625rem; }
  #controles .combo-botao { padding-right: 1.75rem; }
  #controles .combo::after { right: 0.7rem; }
  #controles .acao { gap: 0.375rem; padding-right: 0.5rem; }
}

/* O painel: ancorado ao botao no computador (posicao em variaveis, escritas
   pelo app.js via CSSOM, que a CSP permite), inferior no celular. */
.combo-painel {
  position: fixed;
  inset: var(--combo-topo, 20vh) auto auto var(--combo-esquerda, 1rem);
  width: var(--combo-largura, 18rem);
  max-width: calc(100vw - 2rem);
  /* --combo-max: o app.js mede e decide se abre para baixo ou para cima */
  max-height: var(--combo-max, min(24rem, calc(100dvh - var(--combo-topo, 20vh) - 1rem)));
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  background: var(--papel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.22);
}
.combo-painel[open] { display: flex; }
.combo-painel::backdrop { background: transparent; }
.combo-topo { display: none; }
.combo-busca {
  font: inherit;
  font-size: 1rem;            /* 16px: o iOS nao da zoom ao focar */
  margin: 0.5rem;
  min-height: var(--toque);
  padding: 0.45rem 0.6rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda-campo);
  background: var(--fundo);
  color: var(--texto);
}
.combo-opcoes {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 0.375rem;
}
.combo-opcao {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.55rem 0.9rem;
}
.combo-opcao:hover, .combo-opcao:focus-visible { background: var(--fundo); }
.combo-opcao:focus-visible { outline-offset: -2px; }
/* Grupo de opcoes (o seletor .com tem "no seu navegador" e "na web"): um
   titulo pequeno e calmo, e um fio entre um grupo e o que vem antes. O
   titulo do grupo de cima carrega o denominador das contagens dele. */
.combo-grupo-titulo {
  margin: 0;
  padding: 0.75rem 0.9rem 0.25rem;
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--suave);
}
:is(.combo-opcao, .combo-grupo) + .combo-grupo { margin-top: 0.375rem; border-top: 1px solid var(--borda); }
/* escolhida: peso e marca de texto, nao so cor */
.combo-opcao[aria-pressed="true"] { font-weight: 700; }
.combo-opcao[aria-pressed="true"]::after { content: "✓"; margin-left: auto; padding-left: 0.75rem; color: var(--azul); }
.combo-painel.sem-busca .combo-opcoes { padding-top: 0.375rem; }
.combo-vazio { margin: 0.5rem 0.9rem 0.75rem; color: var(--suave); font-size: 0.9rem; }
/* Painel que fica aberto (o .com): a acao fixa embaixo, fora da rolagem,
   diz quantos nomes a lista tem e fecha. E a unica acao cheia do painel. */
.combo-rodape {
  flex: none;
  padding: 0.625rem 0.75rem;
  background: var(--papel);
  border-top: 1px solid var(--borda);
}
.combo-pronto { width: 100%; min-height: var(--toque); justify-content: center; font-weight: 600; }

@media (max-width: 40rem) {
  /* O painel inferior e `bottom: 0` com `top: auto`, sem conta nenhuma.
     Posicionar a borda de baixo por visualViewport, medido em JS, falha no
     Brave e no Chrome do Android: arrastar para baixo e depois para cima
     deixa o painel flutuando uma barra do navegador acima da borda.
     O visualViewport atrasa enquanto as barras deslizam e nao conta a barra
     de baixo do navegador; um fixo ancorado em `bottom` e movido pelo
     compositor no mesmo quadro que as barras. O teclado fica por
     conta de `interactive-widget=resizes-content` no viewport (layout.html):
     ele encolhe o viewport de layout, e o `bottom: 0` sobe junto. */
  .combo-painel {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 0;
    overscroll-behavior: contain;
  }
  /* Com o painel aberto a pagina nao rola: o toque no fundo escuro rolava a
     lista de tras e fazia as barras do navegador subir e descer. */
  html:has(.combo-painel[open]) { overflow: hidden; }
  .combo-painel::backdrop { background: rgba(15, 23, 32, 0.45); }
  .combo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0 1rem;
  }
  .combo-titulo { font-size: 1rem; margin: 0; }
  .combo-fechar { font-size: 1.5rem; line-height: 1; min-width: var(--toque); border: 0; background: transparent; }
  .combo-busca { margin: 0.5rem 1rem; }
  .combo-opcao { min-height: var(--toque); padding: 0.6rem 1rem; font-size: 1rem; }
  .combo-grupo-titulo { padding: 0.875rem 1rem 0.25rem; }
  .combo-opcoes { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  /* com a acao fixa, a margem da barra do sistema vai para ela */
  .combo-painel:has(.combo-rodape) .combo-opcoes { padding-bottom: 0.375rem; }
  .combo-rodape { padding: 0.625rem 1rem max(0.625rem, env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------- acompanhar

   A estrela e o unico controle de "quero saber se isto mudar". Guarda no
   aparelho, e na volta a pagina confere e conta o que mudou. */
/* ------------------------------------------------ linha da lista

   Dois vocabularios, sem confundir um com o outro. ETIQUETA e uma forma so
   (.selo e .pilula-elegivel: pilula, letra de 12px, fundo tingido) e diz o
   que o nome e; ACAO e texto azul sem borda e diz o que se pode fazer.
   O .conferir continua para os dialogos (disputa.js, pontocom.js). */
.pilula-elegivel, .pilula-links {
  font-size: var(--letra-mini);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  vertical-align: 0.1em;
}
.acao-linha {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;              /* 28px: acima dos 24px do alvo minimo */
  padding: 0 0.125rem;
  font: inherit;
  font-size: var(--letra-apoio);
  font-weight: 600;
  color: var(--azul);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.acao-linha:hover { text-decoration: underline; text-underline-offset: 0.2em; background: none; }
.acao-linha:disabled { color: var(--suave); cursor: progress; text-decoration: none; }
/* Os dois avisos que ficam ao lado do nome: possivel marca e extensao restrita. Uma linha
   propria embaixo do nome, na fonte do texto, nao na do dominio. */
.aviso-marca, .aviso-restrita {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--fonte);
  font-size: var(--letra-apoio);
  font-weight: 500;
  overflow-wrap: normal;
}
.aviso-restrita { color: var(--ambar); }
/* o sinal do Cloudflare Intel: ambar, nao vermelho (vermelho e marca de terceiro,
   que e exclusao; este e historico, e quem decide e quem le) */
.aviso-marca.aviso-sinal { color: var(--ambar); }

/* a leitura: idade, "mudou" e "conferir" juntos, porque conferir e ler de novo */
.leitura { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
/* Fora do celular o selo fica em cima da leitura. */
@media (min-width: 40.0625rem) {
  #tabela th, #tabela td { padding-left: 0.625rem; padding-right: 0.625rem; }
  .situacao-linha { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
}
@media (min-width: 40.0625rem) and (max-width: 61.99rem) {
  .acao-linha { white-space: normal; text-align: left; }
  /* tablet: a nota sai, como no cartao do celular (a ordem continua no
     seletor), e as celulas ficam mais juntas, para a tabela nao rolar de lado */
  #tabela th:nth-child(5), #tabela td.col-nota { display: none; }
  #tabela th, #tabela td { padding-left: 0.4rem; padding-right: 0.4rem; }
}
/* So com largura de sobra (992px ou mais) as colunas ganham piso, para
   "conferir" e "lembrar do fim" nao quebrarem. Entre o celular e isso
   (tablet, notebook de 1024px com zoom) o piso fazia a tabela rolar de
   lado, entao ali o texto quebra. */
@media (min-width: 62rem) {
  td.col-situacao { min-width: 14rem; }
}
/* Notebook (29/09/2026): a tabela automatica dava a sobra ao nome e tirava
   a coluna de acoes quando ela vinha vazia, entao o selo pulava de lugar a
   cada filtro e ficava a 600px do nome. Larguras fixas no cabecalho, a
   situacao numa linha so (selo, idade, conferir) e sem o "–" das linhas
   sem contagem, como no cartao do celular.
   A sobra vai para o nome, que leva o "i" do resumo e as etiquetas ("N
   links", ".com livre") numa linha so; situacao, contagem e nota ficam
   juntas a direita, com largura fixa. Com o nome em 30%, a situacao ficava
   com quase metade da tabela para uma leitura curta, e o vazio cortava o
   grupo da direita ao meio (medido em 05/10/2026, a 1280 e 1366px). */
@media (min-width: 62rem) {
  #tabela { table-layout: fixed; }
  #tabela th.col-marca { width: 3rem; }
  #tabela th:nth-child(3) { width: 19rem; }
  #tabela th:nth-child(4), #tabela th:nth-child(5) { width: 6.5rem; }
  td.col-situacao { min-width: 0; }
  .situacao-linha { flex-direction: row; align-items: center; gap: 0.25rem 0.625rem; }
  td.col-competindo .competindo-nulo { visibility: hidden; }
}
/* Pagina sem nenhuma contagem (entre rodadas): a coluna sai e a largura vai
   para o nome (lista/tabela.js). No celular o cartao ja esconde o vazio. */
@media (min-width: 40.0625rem) {
  #tabela.sem-contagem th:nth-child(4), #tabela.sem-contagem td.col-competindo { display: none; }
}

/* No celular a linha vira cartao. A estrela fica a direita do nome, nao numa
   calha a esquerda (44px de altura inteira em toda linha, vazios), e a
   contagem a direita da situacao: o nome, a situacao e os motivos
   ganham a largura. Espaco vertical por margem, nao por gap. */
@media (max-width: 40rem) {
  tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "dominio  marca"
      "situacao competindo";
    gap: 0 0.5rem;
    padding: 0.625rem 0.25rem 0.75rem 1rem;
  }
  td.col-marca {
    align-self: center;
    justify-self: end;
    padding: 0;
    /* o alvo de toque segue com 44px; a margem negativa so impede que ele
       estique a linha do nome */
    margin: -0.625rem 0;
  }
  td.dominio { font-size: 1.0625rem; align-self: center; }
  td.col-situacao { margin-top: 0.25rem; align-self: center; }
  td.col-competindo { align-self: center; margin-top: 0.25rem; padding-right: 0.75rem; }
  /* "–" e "?" sao coluna de tabela; no cartao, sem numero, nada aparece */
  td.col-competindo .competindo-nulo { display: none; }
}

.estrela {
  background: none;
  border: 0;
  padding: 0;
  min-width: var(--toque);
  min-height: var(--toque);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--suave);
}
.estrela[aria-pressed="true"] { color: var(--ambar); }
.estrela:hover { color: var(--texto); }
.estrela[aria-pressed="true"]:hover { color: var(--ambar); }
td.col-marca { padding-left: 0.25rem; padding-right: 0; }

.cartao.acompanhando .numero { color: var(--ambar); }

/* O aviso de mudanca e a primeira coisa da pagina: e noticia sobre algo que
   a propria pessoa pediu para vigiar. Borda lateral + titulo em texto: a
   cor nao carrega sozinha. */
.mudancas {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--ambar-claro);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ambar);
  border-radius: 0.5rem;
  font-size: 0.9rem;
}
.mudancas-titulo { margin: 0 0 0.25rem; font-weight: 700; }
.mudancas ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.mudancas .acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ------------------------------------------------------- lista vazia

   Vazio e convite: diz por que esta vazio e oferece o proximo passo. */
.vazio p { margin: 0 auto 0.875rem; max-width: 34rem; }
.vazio button { color: var(--azul); font-weight: 600; }

/* ------------------------------------------------------- lembrete */
.dialogo {
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  background: var(--papel);
  color: var(--texto);
  width: min(26rem, calc(100vw - 2rem));
  box-shadow: 0 1rem 3rem rgba(15, 23, 32, 0.28);
}
.dialogo::backdrop { background: rgba(15, 23, 32, 0.45); }
.dialogo-corpo { padding: 1.125rem 1.125rem 0.75rem; }
.dialogo h2 { font-size: 1.05rem; margin: 0 0 0.375rem; }
.dialogo p { margin: 0 0 0.875rem; font-size: 0.9rem; }
/* O "Fechar" de largura inteira e so do lembrete, que empilha as opcoes;
   os dialogos de consulta (.dialogo-disputa) poem as acoes numa linha. */
.dialogo:not(.dialogo-disputa) .discreto { width: 100%; margin-top: 0.25rem; }

/* As opcoes do lembrete sao uma lista sob fios, sem caixa (04/10/2026, a
   versao B da galeria): o e-mail, quando a janela e da rodada, e a
   primeira linha; as agendas vem depois, com a seta de quem leva a outro
   lugar. Cada linha tem pelo menos 44 px de toque. */
.opcoes-lembrete { display: grid; margin: 0.25rem 0 0.875rem; border-top: 1px solid var(--borda); }
.opcoes-lembrete .opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-height: var(--toque);
  padding: 0.75rem 2rem 0.75rem 0.125rem;
  border: 0;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
  background: none;
  color: var(--texto);
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.opcoes-lembrete .opcao::after {
  content: "";
  position: absolute; right: 0.5rem; top: 50%;
  width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;
  border-top: 1.5px solid var(--suave); border-right: 1.5px solid var(--suave);
  transform: rotate(45deg);
}
.opcoes-lembrete .opcao:hover { background: var(--fundo); }
.opcoes-lembrete .opcao:focus-visible { outline: 2px solid var(--texto); outline-offset: -2px; }
.opcoes-lembrete .opcao-email { padding: 0.75rem 0.125rem 0.875rem; border-bottom: 1px solid var(--borda); }
.opcao-email > strong { display: block; font-size: 0.95rem; }
.opcao-email > span { display: block; margin: 0.05rem 0 0.625rem; font-size: var(--letra-apoio); color: var(--suave); }
.opcao-email .avisos-barra { max-width: none; }
.opcao-email .avisos-ok { margin: 0.25rem 0 0; }
.opcao strong { font-size: 0.95rem; }
.opcao span { font-size: var(--letra-apoio); color: var(--suave); }
.nota-lembrete { color: var(--suave); font-size: var(--letra-apoio) !important; }

/* Nome da rodada que a varredura nao consulta: sem situacao nem contagem.
   Contornado e tracejado, para nao parecer "sem competicao" de relance. */
.selo.nao-verificado {
  background: transparent;
  color: var(--suave);
  border: 1px dashed var(--borda);
}



/* --------------------------------------------------- tabela comparativa

   Duas colunas contrastando EUA e Brasil. A coluna do Brasil e destacada
   porque e o lado que a pagina explica; o destaque e de fundo, nunca so de
   cor de texto, e a primeira coluna nomeia a linha — quem usa leitor de tela
   recebe a mesma informacao sem depender do realce. */
.versus .destaque-col { background: var(--verde-claro); }
.versus thead .destaque-col { color: var(--verde); }
.versus .tld {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: none;
  color: var(--suave);
}
.versus td:first-child { color: var(--suave); white-space: nowrap; }
.tabela-doc .num { text-align: right; font-variant-numeric: tabular-nums; }

/* No celular tres colunas nao cabem, e o rotulo de linha vira cabecalho de
   bloco.

   ATENCAO A ESPECIFICIDADE: a regra acima usa `.prosa .tabela-doc td`
   (0,2,1) para devolver a tabela ao formato de grade. Escrever aqui so
   `.versus td` (0,1,1) perdia a disputa em silencio — a tabela continuava
   com tres colunas num celular de 390px, estourava a largura da pagina e
   fazia o corpo inteiro rolar na horizontal. Por isso os seletores abaixo
   repetem o `.prosa`: mesma especificidade, e ganham por virem depois.

   O limite e 40rem, o mesmo da regra que estao sobrescrevendo. Fossem
   diferentes, sobraria uma faixa de largura sem regra. */
@media (max-width: 40rem) {
  .prosa .versus,
  .prosa .versus tbody,
  .prosa .versus tr,
  .prosa .versus td { display: block; }
  .prosa .versus thead { display: none; }
  .prosa .versus tr { border-bottom: 1px solid var(--borda); padding: 0.25rem 0; }
  .prosa .versus tr:last-child { border-bottom: 0; }
  .prosa .versus td { border-bottom: 0; padding: 0.2rem 0.75rem; }
  .prosa .versus td:first-child {
    font-weight: 600;
    color: var(--texto);
    white-space: normal;
    padding-top: 0.5rem;
  }
  .prosa .versus td:nth-child(2)::before { content: "EUA: "; color: var(--suave); }
  .prosa .versus td:nth-child(3)::before { content: "Brasil: "; color: var(--suave); }
}

/* Rede de seguranca: nenhuma tabela pode empurrar a largura da pagina.
   Se alguma ainda nao couber, ela rola dentro do proprio quadro — o corpo
   da pagina nunca rola na horizontal. */
.prosa .tabela-doc { max-width: 100%; }

/* A linha do "1" na distribuicao de candidatos: e um zero que deveria ser o
   maior numero da tabela. Merece destaque, mas o texto ja diz isso em
   palavras — a cor reforca, nao carrega sozinha a informacao. */
.destaque-linha { background: var(--ambar-claro); }
.destaque-linha td { color: var(--texto); }

/* ------------------------------------------------------- perguntas e cartoes

   Cada pergunta e um bloco fechado em si: da para ler uma e ir embora, que e
   como FAQ e usado de verdade. A resposta curta vem antes da explicacao pelo
   mesmo motivo — quem so quer o "nao" nao deveria ter que ler um paragrafo
   para achar. */
.pergunta {
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  padding: 0.25rem 1rem 1rem;
  margin: 1rem 0;
  background: var(--papel);
}
.prosa .pergunta h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 1rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.3;
}
.resposta-curta {
  font-weight: 600;
  color: var(--texto);
  font-size: 1rem;
  margin: 0.25rem 0 0.5rem;
}

/* Citacao de regra oficial. Existe para separar visualmente "o que a norma
   diz" de "o que nos entendemos" — a diferenca que este projeto inteiro tenta
   manter honesta. */
.citacao {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--azul);
  background: var(--fundo);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.9rem;
  font-style: italic;
}
.citacao cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: var(--letra-mini);
  color: var(--suave);
}

/* ------------------------------------------------------------- insights

   Cartoes, nao uma coluna unica de texto: cada achado fechado em si, com
   etiqueta, titulo e a conclusao em uma linha antes do desenvolvimento. Assim da para ler um, entender, e
   parar — que e como as pessoas leem este tipo de pagina. */
.entrada {
  font-size: 1rem;
  color: var(--suave);
}

.indice {
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--papel);
  margin: 1rem 0 1.5rem;
}
.prosa .indice ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.prosa .indice li { margin: 0.35rem 0; }

.insight {
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  padding: 1rem 1rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--papel);
}
.etiqueta {
  font-size: var(--letra-mini);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--suave);
  font-weight: 700;
  margin: 0;
}
.prosa .insight h1,
.prosa .lista-insights h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0.25rem 0 0.375rem;
}
.prosa .lista-insights { list-style: none; padding: 0; margin: 0; }
.prosa .lista-insights h2 { font-size: 1.15rem; }
.prosa .lista-insights h2 a { color: var(--texto); text-decoration: none; }
.prosa .lista-insights h2 a:hover { color: var(--azul); text-decoration: underline; }
.prosa .lista-insights .resumo-insight { margin-bottom: 0; }
/* A conclusao antes do desenvolvimento: quem so quer o achado nao precisa
   ler o resto para ter valor da pagina. */
.resumo-insight {
  font-size: 0.95rem;
  color: var(--texto);
  border-left: 3px solid var(--verde);
  padding-left: 0.75rem;
  margin: 0 0 0.875rem;
}

@media (min-width: 48rem) {
  .insight { padding: 1.25rem 1.5rem 1.5rem; }
}

/* ------------------------------------------------------------- glossario

   Um termo por bloco, com ancora propria (/glossario/#ticket): e o endereco
   que as outras paginas, o Google e um agente de IA citam. A definicao se le
   sozinha, sem depender do termo de cima. */
.glossario dt {
  font-weight: 700;
  font-size: 1.02rem;
  margin-top: 1.25rem;
  scroll-margin-top: 4rem;
}
.glossario dd {
  margin: 0.25rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--borda);
}
.glossario dt:target + dd { border-left-color: var(--azul); }

/* ---------- graficos dos insights (garimpo/web/graficos.py) ----------
   SVG com classes: as cores vem dos tokens do tema, entao o escuro funciona
   sem segundo desenho. Texto sempre em tinta de texto, nunca na cor da serie. */
.grafico { margin: 1.25rem 0 1.5rem; }
.g-quadro { overflow-x: auto; }
/* min-width = largura do viewBox (640 = 40rem): o SVG nunca encolhe abaixo
   da escala 1, e o font-size 13 do desenho nunca vira menos de 13px na tela;
   em tela estreita o quadro rola na horizontal. */
.g-quadro svg { display: block; width: 100%; min-width: 40rem; height: auto; font-family: inherit; }
.g-grade { stroke: var(--borda); stroke-width: 1; }
.g-eixo-linha { stroke: var(--suave); stroke-width: 1; opacity: 0.6; }
.g-eixo { fill: var(--suave); }
.g-rotulo { fill: var(--texto); }
.g-s1 { fill: var(--azul); }
.g-s0 { fill: var(--suave); fill-opacity: 0.45; }
.g-destaque { fill: var(--ambar); }
.g-area { fill: var(--azul); fill-opacity: 0.1; stroke: none; }
.g-linha { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-ponto { fill: var(--azul); stroke: var(--papel); stroke-width: 2; }
.grafico path:hover, .grafico circle:hover { fill-opacity: 1; filter: brightness(1.15); }
.grafico figcaption { font-size: var(--letra-apoio); color: var(--suave); margin-top: 0.5rem; }
/* "Ver os numeros": a tabela de oito colunas das modas mede ~650px. Com
   display:table o overflow-x da propria tabela nao vale, e ela empurrava o
   corpo da pagina para o lado no celular. Quem rola e o <details>, que e
   bloco: a tabela passa da largura so dentro dele. */
.grafico details { overflow-x: auto; max-width: 100%; }
.g-fonte { display: block; font-size: var(--letra-apoio); margin-top: 0.25rem; }
.g-chave { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--letra-apoio); color: var(--suave); margin: 0 0 0.5rem; }
.g-chave span { display: inline-flex; align-items: center; gap: 0.4rem; }
.g-chave .g-sep { display: none; }
.g-amostra { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.g-amostra.g-s1 { background: var(--azul); }
.g-amostra.g-s0 { background: var(--suave); opacity: 0.45; }
.g-amostra.g-destaque { background: var(--ambar); }
.numero-grande { font-size: 2.75rem; font-weight: 700; line-height: 1.1; margin: 1rem 0 0.25rem; color: var(--texto); }
.numero-grande + p { margin-top: 0; color: var(--suave); }
.g-fraco { fill-opacity: 0.55; }

/* Pagina Dados: numero grande + uma frase que qualquer pessoa
   entende, e o botao de compartilhar. A grade vira uma coluna no celular. */
/* Presos a .prosa: sem isso valiam tambem para os cartoes da ferramenta, que
   no inicio viravam colunas de 14rem (uma coluna alta no celular). */
.prosa .cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 1rem 0 1.25rem; }
.prosa .cartao { display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem;
          border: 1px solid var(--borda); border-radius: 10px; padding-block: 0.9rem; padding-inline: 1rem; background: var(--papel); }
.prosa .cartao p { margin: 0; color: var(--suave); }
.cartao-numero { display: block; font-size: 2.1rem; line-height: 1.1; margin-bottom: 0.3rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.prosa .degraus { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }
.prosa .degraus li { margin: 0; border: 1px solid var(--borda); border-radius: 10px; padding-block: 0.6rem; padding-inline: 0.75rem; }
.prosa .degraus li:last-child { border-color: var(--ambar); border-width: 2px; }
.degraus strong { display: block; margin-bottom: 0.15rem; }
.tabela-rolavel { overflow-x: auto; }

/* ------------------------------------------------------- apresentacao

   O topo do inicio: quem chega de um link precisa entender em
   poucos segundos o que e a pagina, em que ponto a rodada esta e o que
   fazer. Compacto de proposito: a lista continua sendo o produto, e no
   computador os cartoes seguem visiveis sem rolar. */
.titulo-inicio {
  /* Sobe de 2,2rem para 2,8rem no computador: e a primeira coisa lida, e
     com a fonte propria o titulo aguenta o tamanho sem virar grito. */
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0.625rem;
  text-wrap: balance;
}
.apresentacao { margin-bottom: 1.25rem; }
.apresentacao .subtitulo {
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.125rem);
  line-height: 1.6;
  /* medida de leitura: abaixo de 70 caracteres por linha */
  max-width: 40rem;
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}
.fase-inicio {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--papel);
  border: 1px solid var(--borda);
}
.fase-inicio::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--suave);
  align-self: center;
}
.fase-inicio[data-fase="aberta"] { background: var(--verde-claro); border-color: transparent; color: var(--verde); }
.fase-inicio[data-fase="aberta"]::before { background: var(--verde); }
.fase-inicio[data-fase="fim"] { background: var(--ambar-claro); border-color: transparent; color: var(--ambar); }
.fase-inicio[data-fase="fim"]::before { background: var(--ambar); }

.passos {
  list-style: none;
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
}
/* O numero sai do fluxo (absolute): com grid no li, o texto solto depois do
   <strong> virava uma celula a parte e o passo quebrava em pedacos. */
.passos li {
  counter-increment: passo;
  position: relative;
  padding-block: 0.625rem;
  padding-inline: 2.75rem 0.75rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0.75rem;
  top: 0.625rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--sobre-azul);
  font-size: var(--letra-apoio);
  font-weight: 700;
}
.passos strong { display: block; }

/* No celular os passos viram linhas enxutas, sem caixa: tres caixas
   empilhadas empurravam a lista para longe da dobra. */
@media (max-width: 40rem) {
  .apresentacao { margin-bottom: 1rem; }
  .passos { gap: 0.375rem; }
  .passos li { padding-block: 0; padding-inline: 1.875rem 0; background: none; border: 0; font-size: var(--letra-apoio); }
  .passos strong { display: inline; }
  .passos li::before { left: 0; top: 0.05rem; width: 1.3rem; height: 1.3rem; font-size: var(--letra-mini); }
  .fase-inicio { font-size: var(--letra-apoio); border-radius: 0.625rem; }
}

/* ---------------------------------------------------- dobras do celular

   No celular os tres passos e os filtros da lista ficam atras de um botao
   que abre e fecha: abertos, eles somavam ~450px e o primeiro nome da lista
   ficava a duas telas do topo (medido a 390px). No computador o botao nao
   aparece e tudo segue aberto. O botao nasce com hidden e so aparece quando
   lista/dobras.js o arma (data-pronta): sem script, nada se esconde. */
.dobra { display: none; }
@media (max-width: 40rem) {
  .dobra[data-pronta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.75rem;
    font-weight: 600;
    text-align: left;
  }
  .dobra svg {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease-out;
  }
  .dobra[aria-expanded="true"] svg { transform: rotate(180deg); }
  .dobra-passos[data-pronta][aria-expanded="false"] + #p-passos { display: none; }
  .dobra-filtros[data-pronta][aria-expanded="false"] + #controles :is(#controles-filtros, #acoes-lista) { display: none; }
}
/* na busca os passos ja somem (modo busca); o botao deles vai junto */
body.modo-busca .dobra-passos { display: none; }

/* O que e o Liberados, no rodape de toda pagina: quem chega pelo Google ou
   por um agente numa pagina de texto tambem precisa saber onde esta. */
.rodape-sobre { flex-basis: 100%; }
.rodape-sobre a { color: var(--azul); }

/* Os caminhos fixos do rodape: /dominios/, o ciclo de vida e o glossario
   precisam de link interno em toda pagina. Alvo de toque de pelo menos 24px, mesmo com a fonte pequena do
   rodape. */
.rodape-nav {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1rem;
}
.rodape-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--azul);
}

/* ----------------------------------------------------- links dos trechos

   Todo titulo com id e um link para si mesmo (o build faz) e ganha, com JS,
   um icone discreto de copiar/compartilhar. O titulo nao pode parecer link
   azul no meio do texto: so sublinha ao passar o mouse. */
.prosa .ancora { color: inherit; text-decoration: none; }
.prosa .ancora:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* o cabecalho e fixo a partir de 48rem, com altura que varia por pagina e
   largura (65, 113 ou 149px): scroll-padding-top no html cobre qualquer
   rolagem ate um id (link, busca do navegador, Shift+Tab), usando a
   --altura-cabecalho que site_modelo/tema.js publica com ResizeObserver.
   7rem no valor de reserva e so para o raro caso sem JS. */
@media (min-width: 48rem) {
  html { scroll-padding-top: calc(var(--altura-cabecalho, 7rem) + 0.5rem); }
}

/* margem propria do titulo, pequena: o scroll-padding-top acima ja reserva
   o espaco do cabecalho, e somar os dois deixava sobra demais no topo */
.prosa [id] { scroll-margin-top: 1rem; }
@media (min-width: 48rem) {
  .prosa [id] { scroll-margin-top: 0.5rem; }
}

.copiar-link, .compartilhar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  margin-left: 0.25rem;
  vertical-align: middle;
  border: 0;
  border-radius: var(--raio);
  background: none;
  color: var(--suave);
  cursor: pointer;
}
.copiar-link svg, .compartilhar svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.copiar-link:hover, .compartilhar:hover { color: var(--azul); background: var(--fundo); }
/* O icone so existe com mouse (compartilhar.js nem o cria no toque) e so
   aparece perto do titulo ou do cartao: vinte icones fixos numa pagina de
   perguntas viram ruido. O foco de teclado sempre mostra. */
@media (hover: hover) {
  .copiar-link, .prosa .cartao .compartilhar { opacity: 0; transition: opacity 0.15s; }
  :is(h2, h3, dt):hover > .copiar-link, .copiar-link:focus-visible,
  .prosa .cartao:hover > .compartilhar, .compartilhar:focus-visible { opacity: 1; }
}
.link-copiado {
  margin-left: 0.25rem;
  font-size: var(--letra-mini);
  font-weight: 600;
  color: var(--verde);
  vertical-align: middle;
}
dt .copiar-link { width: 1.75rem; height: 1.75rem; }

/* cartoes da pagina Dados: o icone no canto, sem disputar com o numero */
.prosa .cartao { position: relative; }
.prosa .cartao .compartilhar { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; }
.prosa .cartao-numero { padding-right: 2rem; }

/* quem chega por um link ve onde caiu */
@keyframes realce { from { background: var(--ambar-claro); } to { background: transparent; } }
.prosa :is(h2, h3, dt):target { animation: realce 2.5s ease-out; border-radius: var(--raio); }
.prosa .pergunta:has(> h2:target), .prosa .cartao:target {
  box-shadow: inset 3px 0 0 var(--ambar);
}
@media (prefers-reduced-motion: reduce) {
  .prosa :is(h2, h3, dt):target { animation: none; background: var(--ambar-claro); }
}

/* indice "Nesta pagina": o rotulo pequeno, a lista compacta */
.indice-titulo {
  margin: 0 0 0.375rem !important;
  font-size: var(--letra-mini);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--suave);
}
.prosa .indice a { text-decoration: none; }
.prosa .indice a:hover { text-decoration: underline; }
@media (max-width: 40rem) {
  .prosa .indice li { margin: 0.5rem 0; line-height: 1.4; }
}

/* ------------------------------------------------------- ficha (/quando-volta/)
   A consulta de um nome so. O cartao do resultado leva a cor da situacao na
   borda esquerda, com as mesmas cores dos selos da lista: livre verde,
   rodada azul, leilao roxo, com titular neutro, congelado ambar. */
.ficha { margin: 1rem 0 1.5rem; }
.ficha-busca { display: flex; gap: var(--gap); flex-wrap: wrap; }
.ficha-busca input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--toque);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--texto);
}
.ficha-busca input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.ficha-busca button { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.ficha-resultado:empty { display: none; }
.ficha-resultado { margin-top: 0.875rem; }
/* Com ?d= na URL (classe posta pelo script do <head>, antes da pintura) a
   ficha tem lugar guardado desde o primeiro quadro: sem isso o cartao,
   preenchido segundos depois, empurrava o indice e o resto da pagina (CLS
   0,17 no celular e 0,12 no computador, Lighthouse, 02/10/2026). A altura
   e a do cartao curto (nome livre: ~430px no celular, ~350px no
   computador); com dono ou historico ele passa dela, mas no celular a
   reserva ja leva o indice para baixo da dobra, e o que cresce fora da
   tela nao conta. A reserva nunca encolhe depois: encolher tambem e salto. */
html.ficha-pedida #ficha-resultado { display: block; min-height: 27rem; }
@media (min-width: 48rem) {
  html.ficha-pedida #ficha-resultado { min-height: 29rem; }
}
.ficha-cartao {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--suave);
  border-radius: var(--raio);
  background: var(--papel);
  padding: 0.875rem 1rem 0.5rem;
}
.ficha-livre { border-left-color: var(--verde); }
.ficha-rodada { border-left-color: var(--azul); }
.ficha-leilao { border-left-color: var(--roxo); }
.ficha-congelado, .ficha-vencido { border-left-color: var(--ambar); }
.ficha-decisao, .ficha-invalido { border-left-color: var(--vermelho); }
.prosa .ficha-cartao h2.ficha-titulo {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 0.375rem;
  font-size: 1.1rem;
}
.ficha-previsao strong { color: var(--texto); }
.prosa .ficha-nota, .ficha-nota { font-size: var(--letra-apoio); color: var(--suave); }

/* Os fatos do registro em linhas, como a ficha do .com: rotulo apagado, fio
   entre as linhas, valor na cor do texto. Os valores sao curtos (datas e um
   nome), entao as duas colunas ficam tambem no celular: empilhado, o bloco
   dobrava de altura. */
.ficha-fatos {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
}
.ficha-fatos dt, .ficha-fatos dd { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--borda); }
.ficha-fatos dt { color: var(--suave); padding-right: 1.5rem; }
.ficha-fatos dd { overflow-wrap: anywhere; }
.ficha-fatos > :nth-last-child(-n + 2) { border-bottom: 0; }

/* Acoes: so a principal e botao cheio, e compacto; as outras sao links de
   texto (com seta quando saem do site). Dois botoes de 44px lado a lado
   pesavam mais que a informacao. No toque, a principal mantem os 44px. */
.ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0.875rem 0 0.25rem; }
.ficha-acoes .primario {
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--azul);
  border-color: var(--azul);
  color: var(--sobre-azul);
}
.ficha-acoes :is(button, a.botao-link):not(.primario) {
  min-height: 0;
  padding: 0.375rem 0;
  border: 0;
  background: none;
  color: var(--azul);
  font-size: var(--letra-apoio);
  font-weight: 600;
}
.ficha-acoes :is(button, a.botao-link):not(.primario):hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (pointer: coarse) { .ficha-acoes .primario { min-height: var(--toque); } }

/* As secoes que chegam depois (historico, arquivo, links...) separadas por
   fio, com titulo curto: o cartao le como uma ficha, nao como um texto corrido. */
.ficha-cartao :is(.ficha-passagens, .ficha-arquivo, .ficha-trafego, .ficha-links,
  .ficha-citacoes, .ficha-categorias):not(:empty) {
  border-top: 1px solid var(--borda);
  margin-top: 1rem;
  padding-top: 0.875rem;
}
.prosa .ficha-cartao h3 { font-size: 0.9375rem; margin: 0 0 0.25rem; }
.ficha-erro { color: var(--vermelho); }
.ficha-carregando { color: var(--suave); }

/* O resumo da ficha num dialogo (ficha.js, Ficha.abrir), aberto pelo "i" da
   lista e pelos nomes das paginas de ramo. As tres faixas sao as de quem
   aponta (.links-cabeca, .links-rolagem, .links-acoes, em web/style.css).
   No meio so os fatos do nome, em linhas (.ficha-fatos); sem fato, o meio
   some e ficam o nome, a situacao e as acoes.
   O topo e fixo, nao centrado: o dialogo abre com "Consultando..." e cresce
   quando o RDAP responde (de ~190px para ~440px no celular). Centrado, ele
   subia inteiro a cada resposta (CLS 0,18 no celular com rede 4G lenta,
   02/10/2026); com o topo parado, o nome nao se mexe e so o rodape desce.
   O topo e o de um dialogo tipico (~28rem) centrado. */
.dialogo.dialogo-ficha {
  --ficha-topo: max(1rem, calc(50dvh - 14rem));
  width: min(30rem, calc(100vw - 2rem));
  margin-top: var(--ficha-topo);
  margin-bottom: auto;
  max-height: min(40rem, calc(100dvh - var(--ficha-topo) - 1rem));
}
.dialogo-ficha[open] { display: flex; flex-direction: column; }
.dialogo-disputa.dialogo-ficha .dialogo-corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}
.dialogo-ficha .ficha-dialogo-cabeca h2 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.dialogo-ficha .ficha-dialogo-cabeca h2:focus { outline: none; }
.dialogo-ficha:has(.ficha-dialogo-rolagem:empty) .ficha-dialogo-cabeca { border-bottom: 0; }
/* a situacao com um ponto na cor dos selos da lista: verde livre, azul
   rodada, roxo leilao, ambar travou ou venceu, cinza com dono */
.dialogo-ficha .ficha-dialogo-situacao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto);
}
.ficha-dialogo-situacao::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--suave);
}
.ficha-dialogo-situacao[data-tipo="livre"]::before { background: var(--verde); }
.ficha-dialogo-situacao[data-tipo="rodada"]::before { background: var(--azul); }
.ficha-dialogo-situacao[data-tipo="leilao"]::before { background: var(--roxo); }
.ficha-dialogo-situacao:is([data-tipo="travou"], [data-tipo="travado"], [data-tipo="vencido"],
  [data-tipo="congelado"])::before { background: var(--ambar); }
.ficha-dialogo-situacao:is([data-tipo="decisao"], [data-tipo="invalido"])::before { background: var(--vermelho); }
.dialogo-ficha .ficha-dialogo-situacao:empty { display: none; }
.dialogo-ficha .ficha-dialogo-rolagem:empty { display: none; }
.dialogo-ficha .ficha-dialogo-rolagem > p { margin: 0.875rem 0 0; }
.dialogo-ficha .ficha-fatos { margin: 0.25rem 0 0; }
.dialogo-disputa .ficha-dialogo-acoes { justify-content: space-between; }
.ficha-dialogo-link {
  font-size: var(--letra-apoio);
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  padding: 0.375rem 0;
}
.ficha-dialogo-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* O "i" ao lado do nome abre o resumo (lista/linha.js); o nome continua
   levando ao Registro.br. Desfaz o botao base (44px, borda, fundo) para a
   linha nao crescer: 24px de alvo, o minimo do WCAG 2.2 AA e a altura da
   etiqueta "N links" ao lado. */
button.botao-ficha {
  min-height: 1.5rem;
  min-width: 1.5rem;
  padding: 0;
  margin-left: 0.125rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--suave);
  vertical-align: middle;
}
/* O realce so com mouse: no celular o :hover gruda no ultimo toque e o "i"
   ficava azul debaixo do dialogo. O toque ganha o mesmo realce no :active,
   no lugar do retangulo do navegador (-webkit-tap-highlight-color), que o
   Chrome do Android pinta por cima do dialogo recem-aberto, no ponto do
   toque (Chrome do Android emulado, 04/10/2026), e o dialogo pisca. */
@media (hover: hover) {
  button.botao-ficha:hover { color: var(--azul); background: var(--fundo); }
}
button.botao-ficha, button.pilula-links, button.pontocom { -webkit-tap-highlight-color: transparent; }
button.botao-ficha:active { color: var(--azul); background: var(--fundo); }
button.pilula-links:active, button.pontocom:active { border-color: var(--azul); color: var(--azul); }
button.botao-ficha:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
button.botao-ficha svg { width: 1.0625rem; height: 1.0625rem; }

/* ------------------------------------------------------- fase e lembrete no inicio
   A pilula da fase e o botao do lembrete na mesma linha; no celular o botao
   desce. A margem que era da pilula passa para a linha. */
.fase-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
}
.fase-linha .fase-inicio { margin: 0; }
/* Entre rodadas a pilula repetia as datas da contagem logo abaixo ("a lista
   sai em 12/10 e a rodada abre em 14/10"): a contagem fica com o quando, e
   a pilula so aparece quando traz noticia. A marca vem do lista/fase.js, so
   nessa frase; "a lista ja deve ter saido" nao a leva. O texto segue no DOM,
   porque o resumo da busca le a fase dele (lista/resumo.js). Sem :has() a
   pilula so continua. */
main.ferramenta:has(#relogio:not(.escondido)) .fase-inicio[data-repete-relogio] { display: none; }
.lembrar-rodada { min-height: 2.25rem; padding-block: 0.3rem; font-size: var(--letra-apoio); }
.vazio .ficha-da-busca { display: block; margin-top: 0.75rem; color: var(--azul); font-weight: 600; }

/* ------------------------------------------------ busca no topo
   Abaixo do subtitulo, em qualquer largura: depois dos cartoes, no celular,
   ela ficaria duas telas abaixo. O resumo aparece com 3 letras ou mais; cada
   situacao e um botao que filtra a lista la embaixo. So tokens de cor: o
   escuro vem junto. */
.busca-topo { margin: 1rem 0 0.875rem; max-width: 46rem; }
.busca-topo #busca { display: block; width: 100%; box-sizing: border-box; }
.resumo-busca {
  margin-top: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.resumo-busca p { margin: 0; }
.resumo-busca .resumo-cabeca { font-weight: 600; }
.resumo-busca .resumo-cabeca button { margin-left: 0.25rem; color: var(--azul); font-weight: 600; }
/* o filtro esconde parte dos achados: quantos sobram e a saida */
.resumo-busca .resumo-filtros { margin-top: 0.375rem; }
.resumo-busca .resumo-filtros button { margin-left: 0.25rem; color: var(--azul); font-weight: 600; }
.resumo-busca:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.resumo-situacoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.resumo-situacoes button { border-radius: 999px; border-color: var(--borda-campo); font-size: 0.9rem; }
.resumo-situacoes button[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--sobre-azul);
}
.resumo-busca .resumo-ficha,
.resumo-busca .resumo-sugestoes { margin-top: 0.625rem; font-size: 0.95rem; }
.resumo-busca a { color: var(--azul); }
.resumo-busca .resumo-ficha a { font-weight: 600; }
.resumo-busca .resumo-dica { margin-top: 0.5rem; font-size: var(--letra-apoio); color: var(--suave); }

/* ------------------------------------------------ modo busca
   Com 3 letras ou mais na caixa (ou um link com ?busca=), o app.js poe
   body.modo-busca: o que fica entre a caixa e a lista se recolhe e resumo,
   filtros e lista sobem para baixo dela. display: none de verdade, para o
   Tab e o leitor de tela nao passarem pelo que se escondeu. A contagem e o
   subtitulo, acima da caixa, ficam: tira-los faria a caixa pular com o
   teclado aberto.
   Os chips do resumo fazem o papel dos cartoes. Nada sai do DOM, e o HTML
   que o robo le (a / sem ?busca=) e o de sempre. */
.busca-campo { display: flex; gap: 0.5rem; align-items: stretch; }
.busca-campo #busca { flex: 1 1 auto; min-width: 0; }
/* A barra de busca (30/09/2026): caixa e lupa numa peca so. A borda e o
   anel de foco sao da .busca-caixa; o campo perde os dele. A lupa e um
   quadrado cheio dentro da barra, com o raio concentrico ao dela (raio da
   barra menos o respiro), e so ganha a palavra "Buscar" onde sobra largura:
   no celular a palavra comia um terco da linha. */
.busca-caixa {
  --respiro: 0.25rem;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--respiro);
  padding: var(--respiro);
  padding-left: 0;
  background: var(--papel);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-g);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.busca-caixa:hover { border-color: var(--suave); }
/* foco: a borda vira 2px de azul (o box-shadow de 1px soma ao border) e um
   halo tingido em volta; os 2px sozinhos ja passam os 3:1 do indicador */
.busca-caixa:focus-within {
  border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul), 0 0 0 5px color-mix(in srgb, var(--azul) 18%, transparent);
}
.busca-topo .busca-caixa #busca {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0.5rem 0.25rem 0.5rem 1rem;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
}
.botao-buscar {
  flex: 0 0 auto;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: calc(var(--raio-g) - var(--respiro));
  background: var(--azul);
  color: var(--sobre-azul);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.botao-buscar:hover { filter: brightness(1.08); }
.botao-buscar:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.botao-buscar svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}
.botao-buscar-texto { display: none; }
/* o x: um so, o nosso, e so com texto na caixa */
.busca-caixa #busca::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.limpar-busca {
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--raio-g) - var(--respiro));
  background: none;
  color: var(--suave);
}
.limpar-busca:hover { color: var(--texto); background: var(--fundo); }
.limpar-busca svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}
#busca:placeholder-shown ~ .limpar-busca { display: none; }
@media (min-width: 40.0625rem) {
  .botao-buscar { padding: 0 1.125rem 0 0.875rem; }
  .botao-buscar-texto { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .busca-caixa { transition: none; } }
body.modo-busca .avisos,
body.modo-busca .fase-linha,
body.modo-busca #p-passos,
body.modo-busca #p-relogio-nota,
body.modo-busca .cartoes,
body.modo-busca #explica-filtro,
body.modo-busca #rodape-painel { display: none; }
/* A linha da conferencia ao vivo reserva altura para nao empurrar os
   filtros ao aparecer; no modo busca, vazia, ela e as margens deixavam um
   vao de ~59 px entre o resumo e os filtros. Some so a altura: a regiao
   viva continua no ar (nao e display: none). */
body.modo-busca #ao-vivo:empty { min-height: 0; margin: 0; }
body.modo-busca #controles { margin-top: 0.75rem; }
/* Quem chega por um link com ?busca= nao esta digitando: sem teclado
   aberto, a caixa pode subir. No celular o subtitulo tambem se recolhe, e
   o resumo e as primeiras linhas cabem na primeira tela. A classe entra so
   pelo endereco (fim do app.js) e sai com o modo: quem digita no inicio
   nao ve a caixa pular. */
@media (max-width: 40rem) {
  body.modo-busca.modo-busca-link #p-subtitulo,
  body.modo-busca.modo-busca-link .resumo-busca .resumo-dica { display: none; }
  /* No celular, no modo busca, o titulo da lista repete o resumo logo acima
     ("188 nomes" e o chip escolhido) e ocupava duas linhas: fica so para o
     leitor de tela, como a .sr-apenas. O "pagina 1 de 2" segue embaixo. */
  body.modo-busca #titulo-lista {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.modo-busca #controles .linha.secundaria { margin-top: 0.5rem; }
}
/* a fase nao some: vira uma linha curta dentro do resumo */
.resumo-busca .resumo-fase { margin-top: 0.375rem; font-size: var(--letra-apoio); color: var(--suave); }

/* ------------------------------------------------------- paginas por ramo (/dominios/) */
.prosa .tabela-ramo td:first-child { white-space: nowrap; }
/* No celular o nome longo quebra em vez de alargar a pagina: com a coluna de
   links (/dominios/com-links/) a tabela tinha 445px num celular de 390px e a
   pagina inteira rolava de lado (medido em 30/09/2026). A .rolagem volta a
   rolar dentro da prosa, como rede para qualquer tabela larga: o `overflow-x:
   visible` do celular em web/style.css e da lista do inicio, que vira blocos. */
@media (max-width: 40rem) {
  .prosa .tabela-ramo td:first-child { white-space: normal; overflow-wrap: anywhere; }
  .prosa .rolagem { overflow-x: auto; }
}
.prosa .lista-ramos { columns: 2 16rem; column-gap: 2rem; }
.prosa .lista-ramos li { break-inside: avoid; }

/* ------------------------------------------------------- paginas de cada letra
   (/insights/dominios-de-uma-letra/x-com-br/): telas do Internet Archive, o
   quadro "hoje" com o titular atual (letra.js) e a faixa das 26 letras. */
.prosa .captura { margin: 1.25rem 0 1.5rem; }
.prosa .captura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.prosa .captura figcaption { font-size: var(--letra-apoio); color: var(--suave); margin-top: 0.5rem; }
.letra-agora {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
  background: var(--papel);
  padding: 0.75rem 1rem 0.25rem;
}
.prosa .letra-agora p, .prosa .letra-agora ul { margin: 0 0 0.5rem; }
.prosa .letras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 2rem 0 0.75rem;
}
.prosa .letras a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-decoration: none;
}
.prosa .letras a[aria-current="page"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }


/* ------------------------------------------------------- contagem regressiva
   Quanto falta para a proxima data da rodada, na primeira linha da folha,
   acima do titulo: o rotulo, os digitos e, no computador, as tres datas a
   direita como texto, a escolhida sublinhada. A linha fina na borda de cima
   da folha e o andamento ate a data. A caixa vem pronta do build
   (paginas.relogio_da_pagina) com "--" nos digitos, que tem a largura de
   dois algarismos: o app.js troca o texto sem mexer no tamanho (sem CLS).
   Sem contagem (build sem rodada, ou o ultimo marco ja passou) o titulo
   volta a ser o alto da folha. */
main.ferramenta > #p-relogio:has(> .relogio:not(.escondido)) {
  position: relative;
  overflow: hidden;
  margin: 0.25rem 0 0;
  padding: 0 1.25rem;
  background: var(--papel);
  border-radius: var(--raio) var(--raio) 0 0;
}
main.ferramenta > #p-relogio:has(> .relogio:not(.escondido)) + .titulo-inicio {
  margin-top: 0;
  padding-top: 1.5rem;
  border-radius: 0;
}
.relogio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding: 1rem 0 0.875rem;
  border-bottom: 1px solid var(--borda);
}
.relogio-rotulo { margin: 0; font-size: 1rem; font-weight: 600; }
.relogio-digitos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.75rem;
  margin: 0;
  font-size: var(--letra-apoio);
  color: var(--suave);
}
/* em tinta tambem na reta final: a cor da pagina e so a dos pontos e do carimbo */
.relogio-unidade b {
  display: inline-block;
  min-width: 2ch;
  margin-right: 0.15rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
/* a data por extenso so para o leitor de tela: os digitos sao aria-hidden e
   ele depende dela; na tela, as datas a direita ja dizem o dia e a hora */
.relogio-quando {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.relogio-barra {
  --feito: 0%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fundo);
}
.relogio-barra span {
  display: block;
  width: var(--feito);
  height: 100%;
  background: var(--texto);
  transition: width 1s linear;
}
.relogio-marcos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0 0 0 auto;
  padding: 0;
}
.relogio-marco {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--toque);
  padding: 0.25rem 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--texto);
  font: inherit;
  font-size: var(--letra-apoio);
  line-height: 1.2;
  cursor: pointer;
}
.relogio-marco-nome { color: var(--suave); }
.relogio-marco strong { white-space: nowrap; }
.relogio-marco:hover:not(:disabled) { border-bottom-color: var(--borda-campo); }
.relogio-marco[aria-pressed="true"] { border-bottom-color: var(--texto); }
/* data que ja passou: riscada e sem clique, mas legivel (o texto diz "passou"
   pela cor e pelo risco, nunca so pela cor) */
.relogio-marco.passou { cursor: default; opacity: 0.6; }
.relogio-marco.passou strong { text-decoration: line-through; }
/* a ressalva das datas, junto dos passos (#p-relogio-nota) */
.relogio-nota { margin: 0.75rem 0; font-size: var(--letra-apoio); color: var(--suave); }
.relogio-nota:empty { display: none; }

/* no celular, rotulo e digitos empilhados; as datas ficam nos passos (que
   as citam) e a contagem vai ate a data padrao, sem troca de alvo */
@media (max-width: 40rem) {
  .relogio { display: grid; gap: 0.125rem; padding: 0.875rem 0 0.75rem; }
  .relogio-unidade b { font-size: 1.625rem; }
  .relogio-marcos { display: none; }
}

/* O lembrete na agenda, junto das datas que ele lembra (04/10/2026; antes
   um botao solto embaixo da busca): o icone de calendario com contorno,
   depois das datas, o nome no title e no rotulo acessivel. As datas e ele
   formam um grupo a direita que desce inteiro quando falta largura. No
   celular as datas somem e o icone fica a direita dos digitos. */
.relogio-direita { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.relogio-direita .relogio-marcos { margin: 0; }
.relogio-lembrete {
  display: inline-grid; place-items: center; flex: none;
  width: var(--toque); height: var(--toque); min-height: 0; margin: 0; padding: 0;
  border: 1px solid var(--borda-campo); border-radius: var(--raio); background: none;
  color: var(--texto); cursor: pointer;
}
.relogio-lembrete svg {
  width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.relogio-lembrete:hover { background: var(--fundo); border-color: var(--texto); }
.relogio-lembrete:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.relogio-lembrete.escondido { display: none; }
@media (max-width: 40rem) {
  .relogio { grid-template-columns: minmax(0, 1fr) auto; }
  .relogio > :not(.relogio-direita) { grid-column: 1; }
  .relogio-direita { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .relogio-barra span { transition: none; }
}


/* ------------------------------------------------- barra de filtros

   No computador, um painel so, com as acoes separadas por um fio: mesma
   altura, mesma borda, mesmo raio. Soltos, os cinco seletores pareceriam
   pilulas sem relacao, e a linha de acoes da lista (compartilhar, mostrar o
   .com, por pagina, CSV) pareceria mais um filtro. No celular nada muda de
   altura: a tela ali e o recurso escasso, e redesenhar a barra empurraria a
   lista para baixo da dobra. */
@media (min-width: 40.0625rem) {
  #controles {
    padding: 0.75rem 0.875rem;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
  }
  #controles .linha.secundaria {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--borda);
  }
  #controles .pontocom-status:not(:empty) { margin: 0.5rem 0 0; }
}

/* Quem aponta, na ficha (ficha.js, referentesDoNome): os mesmos grupos do
   dialogo da lista (.links-grupo, em style.css). Lista longa recolhida nos
   seis primeiros de cada grupo, ate o botao abrir o resto. */
.ficha-referentes { margin: 0 0 0.5rem; }
.ficha-referentes .links-grupo:first-child { margin-top: 1rem; }
.ficha-referentes.recolhida .links-lista li:nth-child(n+7) { display: none; }
.ficha-referentes-mais { margin-top: 0.375rem; }

/* =====================================================================
   Mundo visual: calma japonesa

   A lista do Registro.br como uma folha limpa sobre a mesa: papel claro,
   tinta escura, fios finos e um unico carimbo vermelho para o que esta
   livre. A primeira versao mora toda neste bloco, no fim do arquivo, para
   ser revista (e desfeita, se for o caso) num lugar so; cores, raios e a
   sombra sao tokens em web/style.css.
   ===================================================================== */

/* cabecalho na mesa, sem caixa propria; o selo .br carimbado antes do nome */
header { background: var(--fundo); }
a.marca-nome { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: -0.015em; }
a.marca-nome::before {
  content: ".br";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--verde);
  border-radius: var(--raio-p);
  color: var(--verde);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  transform: rotate(-4deg);
}
a.marca-nome:hover { color: var(--texto); }
.aba { border-radius: 0; font-weight: 500; }
.aba:hover { background: none; color: var(--texto); }
.aba[aria-current="page"] { background: none; color: var(--texto); box-shadow: inset 0 -2px 0 var(--texto); }

/* a folha do inicio: o titulo e a apresentacao sao uma peca so de papel */
main.ferramenta > .titulo-inicio {
  margin: 0.25rem 0 0;
  padding: 1.75rem 1.25rem 0.75rem;
  background: var(--papel);
  border-radius: var(--raio) var(--raio) 0 0;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
main.ferramenta > .apresentacao {
  margin-bottom: 1.25rem;
  padding: 0 1.25rem 1.5rem;
  background: var(--papel);
  border-radius: 0 0 var(--raio) var(--raio);
}
.apresentacao .subtitulo { color: var(--suave); }

/* a busca e um campo da folha: fundo de mesa, contorno de 3:1 */
.busca-caixa { background: var(--fundo); border-radius: var(--raio); }
.busca-caixa:focus-within { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); }
.botao-buscar, .limpar-busca { border-radius: var(--raio-p); }

/* a fase e o lembrete: texto e botao de fio, sem pilula colorida */
.fase-inicio { background: none; border: 0; padding-inline: 0; border-radius: 0; color: var(--suave); }
.fase-inicio[data-fase="aberta"], .fase-inicio[data-fase="fim"] { background: none; }
.lembrar-rodada { background: none; border-color: var(--borda-campo); }

/* os passos: linhas sob fio, nada de caixa */
.passos li { background: none; border: 0; border-top: 1px solid var(--borda); border-radius: 0; }

/* os numeros: uma fileira sobre um fio, sem cartao; o escolhido ganha o
   fio de tinta em cima. A cor fica com o carimbo, nao com o numero. */
.cartoes { gap: 0 1rem; border-top: 1px solid var(--borda); }
.cartao {
  margin-top: -1px;
  padding: 0.875rem 0 0.75rem;
  min-height: 0;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  border-radius: 0;
}
.cartao:hover { border-top-color: var(--borda-campo); }
.cartao[aria-pressed="true"] { box-shadow: none; border-top-color: var(--texto); }
.cartao .numero { font-weight: 500; letter-spacing: -0.03em; }
.cartao.destaque, .cartao.zerado { background: none; }
.cartao.destaque .numero, .cartao.bom .numero, .cartao.alerta .numero,
.cartao.leilao .numero { color: var(--texto); }
.cartao .titulo { font-weight: 500; }

/* a lista e outra folha: sem moldura, fios entre os nomes */
table { border: 0; }
th { background: var(--papel); }
.dominio { font-weight: 500; }
@media (min-width: 40.0625rem) { #controles { background: none; border: 0; padding-inline: 0; } }

/* A situacao e um ponto na cor do estado e a palavra em letra normal: nada
   de caixa, caixa alta ou carimbo torto (100 carimbos iguais numa lista
   pareciam enfeite gerado, e gritavam mais que o nome). Numa lista de uma
   situacao so (livres, voltam, leilao...) ela some: o titulo da lista ja
   diz, e repetir em cada linha nao informa (lista/filtros.js marca
   #tabela[data-mista]). O vermelho do carimbo fica so no ponto do "livre"
   e no selo da marca. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--texto);
  font-size: var(--letra-apoio);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transform: none;
}
/* O ponto tem tom proprio no claro, um pouco mais vivo que a tinta do
   texto (que precisa de 4,5:1): os tons escuros de texto deixavam o ocre e
   o cinza quase iguais. Todos passam de 3:1 sobre a folha. No escuro os
   tokens de estado ja sao claros e servem. */
:root { --ponto-livre: #c63d2f; --ponto-disputa: #b5810f; --ponto-leilao: #3b62b5; --ponto-fim: #7b838b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --ponto-livre: var(--verde); --ponto-disputa: var(--ambar); --ponto-leilao: var(--roxo); --ponto-fim: var(--suave); }
}
:root[data-tema="escuro"] { --ponto-livre: var(--verde); --ponto-disputa: var(--ambar); --ponto-leilao: var(--roxo); --ponto-fim: var(--suave); }
.selo::before { content: ""; flex: none; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--ponto-fim); }
.selo.sem_competicao, .selo.livre, .selo.disputado, .selo.leilao, .selo.erro,
.selo.registrado, .selo.desconhecido { background: none; color: var(--texto); }
.selo.livre::before, .selo.sem_competicao::before { background: var(--ponto-livre); }
.selo.disputado::before { background: var(--ponto-disputa); }
.selo.leilao::before { background: var(--ponto-leilao); }
.selo.erro::before { background: var(--vermelho); }
/* o que ja terminou (registrado, leilao encerrado, indisponivel) e um anel
   vazado: a forma distingue, nao so a cor */
.selo.registrado::before, .selo.desconhecido::before, .selo.nao-verificado::before {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--ponto-fim);
}
.selo.registrado, .selo.desconhecido, .selo.nao-verificado { color: var(--suave); }
#tabela[data-mista="0"] .selo { display: none; }

/* as etiquetas da linha (o .com do mesmo nome, quem aponta) sao neutras: fio
   fino, letra da tinta suave, sem fundo colorido; o que distingue um estado
   do outro e o texto (e o visto do .com livre), nao a cor */
button.pontocom, button.pontocom-com_dono, button.pontocom-a_venda, button.pontocom-livre {
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: none;
  color: var(--suave);
}
button.pontocom-livre { color: var(--texto); }
button.pontocom-caindo, button.pontocom-erro { border-radius: var(--raio-p); }
.pilula-links, .pilula-links.citado, button.pilula-links {
  border: 1px solid var(--borda);
  background: none;
  color: var(--suave);
}
.pilula-links.citado { color: var(--texto); }

/* o dialogo: folha com o raio grande e a sombra do sistema */
.dialogo { border-radius: var(--raio-g); box-shadow: var(--sombra); }

/* paginas de texto: o mesmo titulo calmo do inicio */
.prosa h1 { font-weight: 500; letter-spacing: -0.025em; }

/* caixas de destaque: fio fino em volta, nada de barra colorida na lateral
   (o texto da caixa ja diz o que ela e) */
.aviso, .aviso.perigo, .mudancas { border: 1px solid var(--borda); border-radius: var(--raio); }
.citacao { background: none; border-left: 1px solid var(--texto); border-radius: 0; }
.resumo-insight { border-left: 0; padding: 0.75rem 0; border-block: 1px solid var(--borda); }
.glossario dd { border-left: 0; padding-left: 0; }
.glossario dt:target + dd { background: var(--fundo); border-radius: var(--raio); padding: 0.25rem 0.5rem; }

/* o insight e uma folha: sem moldura; no celular vai de borda a borda,
   para o texto nao perder largura para a caixa */
.insight { border: 0; border-radius: var(--raio); padding: 1.5rem 1.25rem; }
@media (max-width: 40rem) {
  .insight { margin-inline: -1rem; border-radius: 0; padding-inline: 1rem; }
}

/* revisao final (30/09/2026) */
/* o vermelho mora so no carimbo: o numero dos livres fica em tinta */
.cartao.livre .numero { color: var(--texto); }
/* a etiqueta do insight vem depois do titulo: linha de data, sem caixa alta */
.prosa .insight .etiqueta, .lista-insights .etiqueta { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--letra-apoio); margin: 0 0 0.75rem; }
/* a seta da faixa de abas: icone no traco do site, degrade da cor da mesa */
.abas-seta { background: linear-gradient(90deg, transparent, var(--fundo) 45%); }
.abas-seta svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* cantos de 3 a 6px tambem nas etiquetas da linha e nas caixas de texto */
.pilula-elegivel, .pilula-links, button.pilula-links { border-radius: var(--raio-p); }
.prosa .indice, .prosa .pergunta, .indice, .pergunta { border-radius: var(--raio); }
/* o botao de tema e um icone na mesa, sem caixa */
.tema { background: none; border-color: transparent; }
.tema:hover { border-color: var(--borda); }

@media (max-width: 40rem) {
  /* os numeros dentro da folha: menos ar no celular */
  .apresentacao .cartoes { margin-top: 0.75rem; }
}
.apresentacao .cartoes { margin: 1rem 0 1.25rem; }
@media (max-width: 40rem) {
  /* como a lista foi feita mora com os passos: recolhido junto com eles */
  .dobra-passos[data-pronta][aria-expanded="false"] ~ #rodape-painel { display: none; }
  .apresentacao .subtitulo { font-size: 1rem; line-height: 1.5; }
  .apresentacao .cartao { padding: 0.625rem 0 0.5rem; }
  .apresentacao .cartao .numero { font-size: 1.3rem; }
}
.apresentacao #rodape-painel { margin: 0.75rem 0 0; }

/* No celular a dobra "Datas e como funciona" guarda, com os passos (que
   citam as datas), a ressalva sobre elas e o lembrete: a busca e os numeros
   ficam a vista. Sem :has() o lembrete so continua a vista. */
@media (max-width: 40rem) {
  .dobra-passos[data-pronta][aria-expanded="false"] ~ #p-relogio-nota { display: none; }
  .apresentacao:has(> .dobra-passos[data-pronta][aria-expanded="false"]) .fase-linha { display: none; }
}
/* para onde "levar a lista" rola: um respiro em cima, e no computador a
   altura do cabecalho colado */
.dobra-filtros, #controles { scroll-margin-top: 0.75rem; }
@media (min-width: 48rem) { #controles { scroll-margin-top: 5rem; } }

/* =====================================================================
   Presenca na entrada: titulo e numeros com peso, e os numeros com o ponto
   da situacao, como a lista. A cor fica nos pontos e no carimbo.
   ===================================================================== */
main.ferramenta > .titulo-inicio { font-weight: 600; letter-spacing: -0.03em; }
.cartao .numero { font-weight: 600; }

/* o ponto da situacao tambem nos numeros: a cor diz o que a lista vai mostrar */
.cartao .titulo::before {
  content: "";
  display: inline-block;
  width: 0.5625rem;
  height: 0.5625rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  vertical-align: 0.05em;
  background: var(--ponto-fim);
}
.cartao:is([data-filtro="livres"], [data-filtro="sem_competicao"], [data-filtro="joias"]) .titulo::before { background: var(--ponto-livre); }
.cartao:is([data-filtro="disputados"], [data-filtro="aguardando"]) .titulo::before { background: var(--ponto-disputa); }
.cartao:is([data-filtro="leilao"], [data-filtro="elegiveis"]) .titulo::before { background: var(--ponto-leilao); }
.cartao:is([data-filtro="todos"], [data-filtro="rodada"]) .titulo::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ponto-fim); }
.cartao[data-filtro="acompanhados"] .titulo::before { background: var(--texto); }

/* O cartao escolhido. As fileiras se tocam (gap de linha zero): sozinho, o
   fio de tinta da segunda fileira parecia sublinhar o cartao de cima
   (medido a 390px, 02/10/2026). O fundo da mesa faz do fio a borda de cima
   de uma caixa que e do proprio cartao, e o titulo em 600 marca a escolha
   sem depender de cor nem de posicao. O recuo lateral entra com margem
   negativa igual: numero e titulo nao saem do lugar. Preso a .apresentacao:
   os cartoes da .prosa tem moldura propria. */
.apresentacao .cartao {
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 0 0 var(--raio-p) var(--raio-p);
}
.cartao[aria-pressed="true"] { background: var(--fundo); }
.cartao[aria-pressed="true"] .titulo { font-weight: 600; }

/* Quantos numeros aparecem muda com a fase: de 5 a 9, porque Joias, Livre
   agora, a previa e Acompanhando entram e saem. O auto-fit partia 7 em 6+1,
   e o setimo ficava sozinho numa fileira sem fio (03/10/2026: o miolo para
   em 1120px e sete colunas de 9,5rem pedem 1160px). Aqui a grade conta os
   visiveis e fecha fileiras parelhas: uma so quando cabe, senao 4+3, 3+3,
   3+2. "Pelo menos k" e uma cadeia de k irmaos visiveis; a cadeia maior e
   mais especifica e vence a menor sem depender da ordem. Sem :has() fica o
   auto-fit de antes. */

/* O fio sai da caixa e vai para cada cartao: toda fileira fica sobre o seu
   fio, a segunda tambem. Os cartoes ja se encostam (margem negativa igual ao
   meio vao), entao numa fileira cheia o fio corre inteiro; numa fileira
   curta ele para onde param os numeros. O escolhido engrossa o fio para
   2px com a sombra de dentro, sem mexer no texto. */
.apresentacao .cartoes { border-top: 0; }
.apresentacao .cartao { margin-top: 0; border-top: 1px solid var(--borda); }
.apresentacao .cartao:hover { border-top-color: var(--borda-campo); }
.apresentacao .cartao[aria-pressed="true"] {
  border-top-color: var(--texto);
  box-shadow: inset 0 1px 0 var(--texto);
}

@media (min-width: 40.0625rem) {
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* uma fileira de 5 (e 5+4 com nove) quando cada coluna tem 9,5rem */
@media (min-width: 57rem) {
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* seis numa fileira a partir da mesma largura de antes do contador */
@media (min-width: 67rem) {
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* Sete numa fileira com colunas de 8,75rem (140px): o numero mais largo,
   "125.453", ocupa 114px no tamanho do computador. */
@media (min-width: 72.5rem) {
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* No celular ficam as tres colunas; com quatro numeros, 2+2. Com sete, o
   ultimo nao fica sozinho num canto: toma a fileira toda, numero e titulo
   na mesma linha, como uma faixa. */
@media (max-width: 40rem) {
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)):not(:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)))
    > :not(.escondido):not(:has(~ :not(.escondido))) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }
}
@media (min-width: 22rem) and (max-width: 40rem) {
  .apresentacao .cartoes:has(> :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido) ~ :not(.escondido)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* No computador o titulo, a frase e a busca ficam numa coluna so,
   centrada (04/10/2026): antes a coluna de leitura ia a esquerda e a direita
   sobrava vazia; a tentativa de pôr os numeros ali pesou a tela. Os numeros,
   os passos e a ressalva das datas seguem na largura toda, embaixo. Na busca
   a frase recolhe e a caixa continua no centro. */
@media (min-width: 64rem) {
  main.ferramenta > .titulo-inicio { text-align: center; text-wrap: balance; }
  .apresentacao > .subtitulo { max-width: 44rem; margin-inline: auto; text-align: center; }
  .apresentacao > .busca-topo { margin-inline: auto; }
  .apresentacao > .fase-linha { justify-content: center; text-align: center; margin-top: 0.75rem; }
}

/* a explicacao do numero escolhido nao cola no que vem depois */
.apresentacao .explica-filtro { margin-bottom: 0.875rem; }

/* Tabela da previa do leilao: o nome e tres numeros curtos. A nota e o ramo
   vao numa segunda linha sob o nome, e nao em colunas, para caber em 390px;
   no celular o respiro lateral encolhe e o nome pode quebrar. */
.tabela-doc.previa a { font-weight: 600; }
/* Rotulo de linha (<th scope="row">) com cara de celula: sem o fundo, a
   letra mini e a caixa alta do cabecalho de coluna. O peso volta ao do
   corpo; o link do nome tem o seu. */
.tabela-doc th[scope="row"] {
  background: none;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}
.tabela-doc tr:last-child th[scope="row"] { border-bottom: 0; }
.previa-apoio { color: var(--suave); font-size: var(--letra-apoio); }
@media (max-width: 40rem) {
  .prosa .tabela-doc.previa td, .prosa .tabela-doc.previa th { padding-inline: 0.4rem; }
  .prosa .tabela-doc.previa a { overflow-wrap: anywhere; }
}


/* ------------------------------------------------- avisos por e-mail

   04/10/2026. O campo e uma barra so com o botao dentro, como a busca. Na
   pagina inicial ele mora numa linha da propria lista, depois do 5o nome
   (avisos.js e lista/tabela.js): contorno de tinta sobre a mesa, o botao em
   tinta cheia, sem cobrir nada. O campo tambem esta na janela do lembrete
   e em /avisos/. */

.avisos-barra {
  display: flex; align-items: stretch; height: var(--toque); max-width: 30rem;
  background: var(--fundo); border: 1px solid var(--borda-campo); border-radius: var(--raio);
  overflow: hidden;
}
.avisos-barra:focus-within { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); }
.avisos-barra input[type="email"] {
  flex: 1; min-width: 0; height: auto; margin: 0; padding: 0 0.875rem;
  border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  font: inherit; font-size: 1rem; color: var(--texto);
}
.avisos-barra input[type="email"]::placeholder { color: var(--suave); }
.avisos-barra input[aria-invalid="true"] { color: var(--vermelho); }
.avisos-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.avisos-botao {
  flex: none; display: flex; align-items: center; min-height: 0; margin: 0;
  padding: 0 1rem; border: 0; border-left: 1px solid var(--borda); border-radius: 0;
  background: none; color: var(--texto); font: inherit; font-size: 0.9375rem; font-weight: 600;
  line-height: 1; cursor: pointer;
}
.avisos-botao:hover:not(:disabled) { background: var(--papel); }
.avisos-botao:focus-visible { outline: 2px solid var(--texto); outline-offset: -2px; }
.avisos-botao:disabled { color: var(--suave); cursor: default; }
.avisos-erro { margin: 0.375rem 0 0; font-size: var(--letra-apoio); color: var(--vermelho); }
.avisos-ok {
  display: flex; gap: 0.5rem; align-items: flex-start; margin: 0;
  font-size: var(--letra-apoio); line-height: 1.45; color: var(--texto);
}
.avisos-ok svg {
  flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}

/* O botao em tinta cheia dentro da barra, como o Buscar: na linha da lista,
   onde pedir o e-mail e a acao do lugar. */
.avisos-bloco .avisos-barra { max-width: none; padding: 0.25rem; background: var(--papel); }
.avisos-bloco .avisos-barra input[type="email"] { padding: 0 0.625rem; }
.avisos-bloco .avisos-botao {
  border: 0; border-radius: var(--raio-p); background: var(--texto); color: var(--papel); padding: 0 1rem;
}
.avisos-bloco .avisos-botao:hover:not(:disabled) { background: var(--texto); filter: brightness(1.15); }
.avisos-bloco .avisos-botao:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.avisos-bloco .avisos-botao:disabled { color: var(--papel); opacity: 0.7; }

/* A linha da lista: nao e um nome, entao sai do desenho da linha (grade no
   celular, fio e hover no computador) e vira um bloco proprio, fino como
   uma linha de nome: uma frase, o campo e o x. No computador numa linha so;
   no celular a frase com o x em cima e o campo embaixo. */
tbody tr.avisos-linha, tbody tr.avisos-linha:hover { display: table-row; padding: 0; border: 0; background: none; }
tbody tr.avisos-linha > td { padding: 0.5rem 0; border-bottom: 1px solid var(--borda); }
.avisos-bloco {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.375rem 0.25rem;
  padding: 0.5rem 0.25rem 0.625rem 0.875rem; background: var(--fundo);
  border: 1px solid var(--texto); border-radius: var(--raio);
}
.avisos-bloco-texto {
  display: flex; gap: 0.5rem; align-items: flex-start; margin: 0;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; text-wrap: balance;
}
.avisos-envelope svg {
  display: block; width: 1.25rem; height: 1.25rem; margin-top: 0.03rem;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.avisos-bloco > .avisos-campo, .avisos-bloco > .avisos-ok { grid-column: 1 / -1; grid-row: 2; margin-right: 0.625rem; }
.avisos-bloco .avisos-erro { margin-top: 0.25rem; }
.avisos-bloco-fechar {
  grid-column: 2; grid-row: 1; align-self: start;
  display: grid; place-items: center; width: var(--toque); height: var(--toque); min-height: 0;
  margin: -0.375rem 0 -0.5rem; padding: 0; border: 0; border-radius: var(--raio);
  background: none; color: var(--suave); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.avisos-bloco-fechar svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.avisos-bloco-fechar:active { color: var(--texto); background: var(--borda); }
.avisos-bloco-fechar:focus-visible { outline: 2px solid var(--texto); outline-offset: -2px; }
@media (hover: hover) { .avisos-bloco-fechar:hover { color: var(--texto); background: var(--borda); } }
@media (max-width: 40rem) {
  tbody tr.avisos-linha { display: block; }
  tbody tr.avisos-linha > td { display: block; padding: 0.5rem 0.5rem; }
}
@media (min-width: 48rem) {
  tbody tr.avisos-linha > td { padding: 0.5rem 0.75rem; }
  .avisos-bloco {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem) auto; gap: 0 1.25rem;
    padding: 0.375rem 0.25rem 0.375rem 1.125rem;
  }
  .avisos-bloco-texto { align-items: center; }
  .avisos-envelope svg { margin-top: 0; }
  .avisos-bloco > .avisos-campo, .avisos-bloco > .avisos-ok { grid-column: 2; grid-row: 1; margin-right: 0; }
  .avisos-bloco-fechar { grid-column: 3; align-self: center; margin: 0; }
  /* com mouse, 40px bastam; o celular segue com 44 */
  .avisos-bloco .avisos-barra { height: 2.5rem; }
}

/* a pagina /avisos/ */
.prosa .avisos-pagina { margin: 1.5rem 0; }
.prosa .avisos-pagina .avisos-ok, .prosa .avisos-pagina .avisos-erro { font-size: 1rem; }

/* O Balcao (/balcao/, 07/10/2026; visual de 09/10/2026): dominios a venda
   pelos donos. O anuncio de verdade e uma folha cheia sobre a mesa, com o
   nome como o maior texto da pagina, o preco na tipografia dos numeros, a
   linha de confianca e uma acao so. O exemplo e o contorno dessa folha, todo
   em tinta suave, para nunca parecer oferta. O pedido de vaga e uma segunda
   folha: os precos em fileira, a nota que desarma o preco e os campos da
   folha (fundo de mesa, como a busca do inicio). */
.prosa .balcao-anuncios { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.prosa .balcao-anuncio { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
/* a lista de verdade e uma folha so, como a lista do inicio: com mais de
   um anuncio, eles se separam por fio, nunca viram pilha de cartoes */
.prosa .balcao-anuncios:not(.balcao-exemplos) { gap: 0; padding: 0 1.25rem; background: var(--papel); border-radius: var(--raio); }
.prosa .balcao-anuncios:not(.balcao-exemplos) > .balcao-anuncio { padding: 1.75rem 0 1.5rem; }
.prosa .balcao-anuncios:not(.balcao-exemplos) > .balcao-anuncio + .balcao-anuncio { border-top: 1px solid var(--borda); }
.balcao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; }
.prosa .balcao-nome {
  margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.2; overflow-wrap: anywhere;
}
.prosa .balcao-preco {
  margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.balcao-preco span {
  display: block; margin-top: 0.25rem; font-size: var(--letra-apoio); font-weight: 450; letter-spacing: 0; color: var(--suave);
}
/* o de verdade: Display no nome, Numero no preco. O nome e link para o
   proprio anuncio (o build ancora todo h3); sublinhado no hover parecia
   link para o site do dominio */
.prosa .balcao-nome .ancora:hover { text-decoration: none; }
.prosa .balcao-anuncios:not(.balcao-exemplos) .balcao-nome {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.03em;
}
.prosa .balcao-anuncios:not(.balcao-exemplos) .balcao-preco {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); line-height: 1.05; letter-spacing: -0.03em;
}
.prosa .balcao-meta {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  font-size: var(--letra-apoio); line-height: 1.45; color: var(--suave);
}
.prosa .balcao-meta li { margin: 0; }
.balcao-conferido { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--texto); }
.balcao-conferido svg {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}
.balcao-selo {
  display: inline-block; vertical-align: 0.2em; margin-left: 0.5rem; padding: 0.0625rem 0.375rem;
  font-size: var(--letra-mini); font-weight: 600; line-height: 1.4; letter-spacing: 0; white-space: nowrap;
  color: var(--suave); border: 1px solid var(--borda); border-radius: var(--raio-p);
}

/* o exemplo: so o contorno da folha, tudo em tinta suave */
.prosa .balcao-exemplos > .balcao-anuncio { padding: 1rem 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.balcao-exemplos .balcao-nome, .balcao-exemplos .balcao-preco, .balcao-exemplos .balcao-conferido { color: var(--suave); }
.prosa .balcao-exemplos .balcao-preco { font-weight: 500; }
.prosa .balcao-lote { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.prosa .balcao-lote li {
  min-width: 0; margin: 0; padding: 0.125rem 0.5rem; font-size: var(--letra-apoio); line-height: 1.45; color: var(--suave);
  border: 1px solid var(--borda); border-radius: var(--raio-p); overflow-wrap: anywhere;
}

/* o interesse abre dentro da folha: details, para abrir mesmo sem script.
   Fechado e a acao em tinta; aberto, o resumo vira um "Fechar" discreto e
   sobra uma acao cheia so, a de enviar. */
.prosa details.balcao-interesse { margin: 0.25rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
.balcao-interesse > summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--toque); padding: 0.5rem 1.125rem;
  cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 600;
  color: var(--sobre-azul); background: var(--azul); border: 1px solid transparent; border-radius: var(--raio);
}
.balcao-interesse > summary::-webkit-details-marker { display: none; }
.balcao-interesse > summary:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.balcao-interesse:not([open]) > summary:hover { filter: brightness(1.08); }
.balcao-interesse > summary svg {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}
/* "Fechar" vem do CSS: o leitor de tela le, e o espelho .md (que copia o
   texto do summary) nao sai "Tenho interesseFechar" */
.balcao-interesse > summary svg, .balcao-interesse[open] .balcao-abrir { display: none; }
.balcao-interesse[open] > summary { gap: 0.375rem; }
.balcao-interesse[open] > summary svg { display: block; }
.balcao-interesse[open] > summary::after { content: "Fechar"; }
.balcao-interesse[open] > summary { padding-inline: 0; color: var(--suave); background: none; }
.balcao-interesse[open] > summary:hover { color: var(--texto); }
.prosa .balcao-passos {
  list-style: none; counter-reset: passo; display: grid; gap: 0.5rem;
  margin: 0.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--borda);
  font-size: var(--letra-apoio); line-height: 1.5;
}
.prosa .balcao-passos li { counter-increment: passo; position: relative; margin: 0; padding-left: 2rem; }
.prosa .balcao-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  font-size: var(--letra-mini); font-weight: 700; color: var(--sobre-azul); background: var(--azul);
}
.balcao-interesse .balcao-form { margin-top: 1.25rem; }
.prosa .balcao-folha > .balcao-nota { margin: 0.875rem 0 0.25rem; }

/* os formularios: rotulo em cima, campo da folha (fundo de mesa), botao em tinta */
.balcao-form { display: grid; gap: 0.375rem; max-width: 30rem; }
.balcao-form label { margin-top: 0.375rem; font-size: var(--letra-apoio); font-weight: 600; }
.balcao-form label span { font-weight: 450; color: var(--suave); }
.balcao-form input:not(.avisos-isca), .balcao-form textarea {
  width: 100%; min-height: var(--toque); margin: 0; padding: 0.5rem 0.875rem;
  font: inherit; font-size: 1rem; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda-campo); border-radius: var(--raio);
}
.balcao-form textarea { resize: vertical; line-height: 1.45; }
.balcao-form input::placeholder, .balcao-form textarea::placeholder { color: var(--suave); }
.balcao-form input:focus, .balcao-form textarea:focus {
  outline: 2px solid transparent; border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto);
}
/* (0,3,1) de proposito: ganha do campo e do foco, que ficam em (0,2,1) */
.balcao-form input[aria-invalid="true"]:not(.avisos-isca), .balcao-form textarea[aria-invalid="true"] { border-color: var(--vermelho); }
.balcao-form input[aria-invalid="true"]:focus, .balcao-form textarea[aria-invalid="true"]:focus {
  border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho);
}
.balcao-form .avisos-erro { margin: 0; }
/* a confirmacao recebe foco pelo script: sem anel para quem clicou, com anel no teclado */
.balcao-ok:focus:not(:focus-visible) { outline: none; }
.balcao-botao {
  justify-self: start; min-height: var(--toque); margin-top: 0.625rem; padding: 0.5rem 1.125rem; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--sobre-azul); background: var(--azul);
  border: 1px solid transparent; border-radius: var(--raio);
}
.balcao-botao:hover:not([aria-disabled="true"]) { filter: brightness(1.08); }
.balcao-botao:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.balcao-botao[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.prosa .balcao-nota { font-size: var(--letra-apoio); color: var(--suave); }

/* a folha do pedido de vaga: a fileira de precos na primeira linha (como a
   fileira de numeros do inicio, sem cartao), um fio, a nota e o formulario */
.prosa .balcao-folha { margin: 1.25rem 0 0; padding: 0.875rem 1.25rem 1.5rem; background: var(--papel); border-radius: var(--raio); }
/* dentro de uma folha tudo termina na mesma borda direita */
.prosa .balcao-folha .balcao-form, .balcao-interesse .balcao-form { max-width: none; }
.prosa .balcao-nota strong { font-weight: 600; color: var(--texto); }
.balcao-precos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0 2.5rem;
  margin: 0; border-bottom: 1px solid var(--borda);
}
.prosa .balcao-precos p { margin: 0; padding: 0.875rem 0 0.75rem; display: grid; gap: 0.25rem; }
.balcao-precos strong {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.balcao-precos span { font-size: var(--letra-apoio); font-weight: 500; line-height: 1.4; color: var(--suave); }
.balcao-folha .avisos-ok { margin-top: 1rem; }

/* no celular as folhas vao de borda a borda (como o insight), o preco desce
   para baixo do nome e as acoes ocupam a largura */
@media (max-width: 40rem) {
  .prosa .balcao-anuncios:not(.balcao-exemplos), .prosa .balcao-folha {
    margin-inline: -1rem; padding-inline: 1rem; border-radius: 0;
  }
  .prosa .balcao-exemplos > .balcao-anuncio { padding-inline: 1rem; }
  .balcao-cabeca { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .prosa .balcao-preco { text-align: left; white-space: normal; }
  .balcao-preco span { display: inline; margin: 0 0 0 0.375rem; }
  .balcao-interesse:not([open]) > summary { display: flex; justify-content: center; }
  .balcao-botao { justify-self: stretch; }
  .prosa .balcao-lote { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
}

/* o convite discreto no fim da lista do inicio: texto quieto, sem caixa */
.balcao-convite { margin: 0.75rem 0 0; text-align: center; font-size: var(--letra-apoio); color: var(--suave); }
.balcao-convite a { color: var(--texto); font-weight: 600; text-underline-offset: 0.2em; }