/* resultados.css — página de resultados PRÓPRIA do TAIVA Search.
 *
 * POR QUE ESTE ARQUIVO EXISTE (2026-07-29, ADR 0005). Até aqui a marca na
 * página de resultados vinha de `sxng-ltr.taiva.css`: o CSS compilado do tema
 * "simple" do upstream antigo concatenado com o nosso, servido na URL do original.
 * Auditoria de licença mediu 85.693 bytes do upstream + 6.754 nossos — obra
 * DERIVADA transmitida pela rede, que aciona a cláusula 13 da AGPL-3.0.
 *
 * Aqui não há uma linha do upstream. O visual é reconstruído a partir dos
 * TOKENS de MARCA.md, que são nossos, e da linguagem da home (`index.html`),
 * que também é nossa. O resultado tem de ser indistinguível para quem usa — a
 * marca fica; o que sai é a dependência de licença.
 *
 * CSP: `/busca` cai em @resto (`style-src 'self'`), então isto é arquivo
 * EXTERNO de propósito. Nada de `<style>` inline aqui — ao contrário da home,
 * que é arquivo único autorizado por hash.
 *
 * Duplicação declarada: os blocos de casca (topbar, campo, rodapé) repetem o
 * CSS inline de `index.html`. Não extraí para um `casca.css` comum porque
 * mexer no inline da home exige recalcular os hashes do CSP
 * (`scripts/csp-hash.sh`) e a home está no ar funcionando. Há trava contra a
 * deriva dos TOKENS nos dois arquivos (`scripts/verificar-tokens-visuais.sh`),
 * para a divergência aparecer em vez de acontecer calada.
 */

:root{
  --navy:    #1D293D;
  --navy-2:  #3A4761;
  --navy-3:  #5C6982;
  --mist:    #EDF0F5;
  --mist-2:  #E2E7EF;
  --surface: #FFFFFF;
  --line:    #D2D9E4;

  --sans: "Jost", "Avenir Next", "Century Gothic", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

/* Fontes locais, do próprio domínio (MARCA.md §3) — nenhuma requisição a CDN. */
@font-face{
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/static/taiva/fonts/jost-var.woff2") format("woff2");
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/taiva/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  color: var(--navy);
  font-family: var(--sans);
  /* `-webkit-font-smoothing: antialiased` REMOVIDO (2026-07-31).
     Ele desliga o antialiasing de subpixel e AFINA o traço — tira parte da
     tinta de cada letra. Somado à Jost, que já é geométrica de haste fina, o
     texto fica lavado. Foi metade da queixa de legibilidade do dono; a outra
     metade era `.item p` em font-weight 300 (ver adiante).
     O padrão do navegador rende letra mais encorpada, sem mudar cor nenhuma. */
}

/* ---------- casca: mesma da home ---------- */
.topbar{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  padding: 1.35rem 1.9rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.topbar a{ color: inherit; text-decoration: none; }
.topbar a:hover{ color: var(--navy); }
.topbar span{ display: flex; gap: 1.4rem; }
.topbar .marca{ letter-spacing: .26em; color: var(--navy); font-weight: 500; }
.topbar-esq{ align-items: center; gap: 1rem; }

/* Voltar do QUADRO (só aparece emoldurado — Electron/casca/chat, onde não há
   barra de navegador). Pílula discreta no traço dos demais controles. */
.voltar{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy-2);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.voltar:hover{ color: var(--navy); border-color: var(--navy); }

/* Barra de busca: idêntica à da home, mas fixa no alto (aqui ela é ferramenta,
   não convite — o usuário já buscou). */
.cabeca{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  padding: 0 1.9rem 1rem;
}
.field{
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding-left: 1.6rem;
  box-shadow: 0 1px 2px rgba(29,41,61,.04);
  transition: border-color .25s, box-shadow .25s;
  /* O campo acompanha a tela, com teto: um campo de busca de 2000 px de largura
     não ajuda ninguém a digitar. */
  max-width: 62rem;
}
.field:focus-within{
  border-color: var(--navy);
  box-shadow: 0 6px 26px rgba(29,41,61,.10);
}
.field input{
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 400;
  padding: 1.05rem 0;
}
.field input::placeholder{ color: var(--navy-3); }
.go{
  flex: none;
  margin: .3rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s, opacity .2s;
}
.go:hover{ transform: scale(1.06); }
.go:active{ transform: scale(.96); }
.go svg{ width: 18px; height: 18px; }

.cats{
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-top: .7rem;
}
.cat{
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--navy-3);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  cursor: pointer;
  text-decoration: none;
}
.cat:hover{ color: var(--navy); }
.cat[aria-current="true"]{ color: var(--navy); border-bottom-color: var(--navy); }

/* Idioma e filtro adulto — as duas opções que a tela de preferências do
   upstream destravava, trazidas para a nossa interface. Discretas: são ajuste
   raro, não ação principal. */
.opcoes{
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .55rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.opcoes label{ margin-left: .5rem; }
.opcoes label:first-child{ margin-left: 0; }
/* Filtros de evidência do PubMed (feature #3): checkbox + rótulo na mesma linha
   dos demais filtros. */
.opcoes .filtro-check{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}
.opcoes .filtro-check input{ cursor: pointer; }
.opcoes select{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: none;
  padding: .3rem .6rem;
  cursor: pointer;
}
.opcoes select:focus-visible{ outline: 2px solid var(--navy); outline-offset: 1px; }

/* Campo de site (filtro de 2026-07-31). Mesma pílula dos selects para a linha
   de opções continuar lendo como uma coisa só, e não como um formulário
   colado depois. */
.opcoes input[type="text"]{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: .7rem;
  padding: .3rem .7rem;
  width: 9rem;
  text-transform: none;
  letter-spacing: normal;
}
.opcoes input[type="text"]::placeholder{ color: var(--navy-3); }
.opcoes input[type="text"]:focus-visible{ outline: 2px solid var(--navy); outline-offset: 1px; }

/* "Você quis dizer" / buscas relacionadas. */
.sugestoes{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1.5rem;
  font-size: .88rem;
}
.sugestoes .rotulo{
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.sugestoes a{
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.sugestoes a:hover{ border-bottom-color: var(--navy); }

/* ---------- corpo ---------- */
/* LARGURA TOTAL (pedido do dono 2026-07-30). Antes havia `max-width: 46rem`
   centralizado, que é a medida de leitura confortável para texto corrido — mas
   deixava metade da tela vazia num monitor de consultório e apertava a grade de
   imagens em 4 colunas quando cabiam 8.
   O texto de cada resultado continua com medida controlada (`.item p`), então se
   ganha a tela sem perder a legibilidade da linha. */
.palco{
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 1.6rem 1.9rem 5rem;
}
/* Medida de leitura preservada NO PARÁGRAFO, não no contêiner: linha de 200
   caracteres é ilegível, e era isso que o max-width no palco evitava. */
.item p, .saude-trecho, .resposta{ max-width: 62rem; }

.resumo{
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-3);
  margin: 0 0 1.4rem;
}

/* Aviso de motor que falhou. NÃO é enfeite: sem isto, resultado incompleto
   passa por completo — o médico conclui que não existe artigo quando o PubMed
   apenas não respondeu. É a regra "nenhuma ação termina em silêncio". */
.aviso{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: #FFF8E1;
  border: 1px solid #E8D9A0;
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin: 0 0 1.4rem;
  font-size: .86rem;
  line-height: 1.45;
}
.aviso strong{ font-weight: 500; }

/* Ponte PT→EN (feature #6): convite opt-in a incluir os termos em inglês.
   Tom informativo (azul da casa), distinto do amarelo de alerta do .aviso. */
.ponte-en{
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin: 0 0 1.4rem;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--navy-2);
}
.ponte-en strong{ font-weight: 500; color: var(--navy); }
.ponte-en-termos{ color: var(--navy); font-style: italic; }
.ponte-en-botao{
  display: inline-block;
  margin-left: .3rem;
  padding: .35rem .8rem;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.ponte-en-botao:hover{ background: var(--navy-2); }

/* Código clínico reconhecido (feature #5): mesma família visual do .ponte-en,
   por tokens de tema — veste o tema do chat no modo embutido sem regra própria. */
.codigo-clinico{
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin: 0 0 1.4rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--navy-2);
}
.codigo-clinico strong{
  font-weight: 500;
  color: var(--navy);
  font-family: var(--mono);
  letter-spacing: .02em;
}
.codigo-botao{
  display: inline-block;
  padding: .35rem .8rem;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.codigo-botao:hover{ background: var(--navy-2); }
.codigo-link{
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Resposta direta (campo `answers` do JSON). */
.resposta{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: .5rem;
  padding: 1rem 1.15rem;
  margin: 0 0 1.6rem;
  font-size: .95rem;
  line-height: 1.55;
}
.resposta .fonte{
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-3);
}

/* ---------- resultado ---------- */
.item{ margin: 0 0 1.9rem; }
.item .url{
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--navy-2);   /* era --navy-3: 3,2:1, abaixo do mínimo da WCAG AA */
  margin-bottom: .18rem;
  overflow-wrap: anywhere;
}
.item h2{
  margin: 0 0 .3rem;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.35;
}
.item h2 a{ color: var(--navy); text-decoration: none; }
.item h2 a:hover{ text-decoration: underline; }
.item h2 a:visited{ color: var(--navy-2); }
/* A DESCRIÇÃO é o texto que a pessoa realmente lê — e era o mais fino da
   página: `font-weight: 300` é o extremo leve da Jost (a variável vai de 300
   a 500), em .92rem e no cinza-azulado secundário. Três reduções somadas no
   mesmo elemento. Medido: o contraste sempre esteve alto (8,2:1 do --navy-2
   sobre o fundo, e 12,8:1 com --navy), então o problema nunca foi cor — era
   PESO e TAMANHO, e é isso que muda aqui. Cor da marca fica intacta, e o
   verificador de paridade home/resultados (que compara só os 7 tokens de
   cor) segue passando. */
.item p{
  margin: 0;
  font-size: .97rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--navy);
}
.item .meta{
  margin-top: .35rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* --navy-3 sobre o fundo dá 3,2:1 e REPROVA no mínimo de 4,5 da WCAG AA.
     --navy-2 dá 8,2:1 e continua sendo texto de apoio, visivelmente mais
     discreto que o título. */
  color: var(--navy-2);
}
/* Link "Publicar no Mural" (ADR 0010): mora na linha de metadados, discreto —
   é ação secundária, não pode disputar com o título do resultado. */
.item .meta .mural{
  color: var(--navy-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.item .meta .mural:hover{ color: var(--navy); border-bottom-color: var(--navy); }

/* Campos de data do período "Personalizado": mesma pílula dos selects, para a
   linha de opções continuar lendo como uma coisa só. */
.opcoes input[type="date"]{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: .7rem;
  padding: .3rem .7rem;
  text-transform: none;
  letter-spacing: normal;
}
.opcoes input[type="date"]:focus-visible{ outline: 2px solid var(--navy); outline-offset: 1px; }
.opcoes input[type="date"][hidden]{ display: none; }

/* ---------- imagens ---------- */
.grade{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .7rem;
}
.grade a{
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .4rem;
  overflow: hidden;
  text-decoration: none;
}
.grade img{
  display: block;
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
  background: var(--mist-2);
}
.grade .legenda{
  display: block;
  padding: .45rem .55rem;
  font-size: .72rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--navy-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- paginação ---------- */
.paginas{
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 2.4rem;
}
.paginas button{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6rem 1.3rem;
  cursor: pointer;
}
.paginas button:hover{ border-color: var(--navy); }
.paginas button[disabled]{ opacity: .4; cursor: default; }

/* ---------- estados ---------- */
.estado{
  padding: 3rem 0;
  text-align: center;
  font-size: .9rem;
  font-weight: 300;
  color: var(--navy-2);
}
.estado.erro{ color: #8A2B2B; }

.footer{
  padding: 1.4rem 1.9rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-3);
  text-align: center;
}
.footer a{ color: inherit; text-decoration: none; }
.footer a:hover{ color: var(--navy); }

@media (max-width: 620px){
  .cabeca{ padding: 0 1rem .8rem; }
  .palco{ padding: 1.2rem 1rem 4rem; }
  .topbar{ padding: 1rem; }
}

/* ---------- CONTRASTE E TAMANHO DE TEXTO (pedido do dono, 2026-07-30) ----------

   Ele pediu "letras brancas para contrastar mais com o azul claro". A medição
   contrariou o pedido e vale registrada, porque é contra-intuitiva:

     branco  sobre #6FADE0 (azul claro) → 2,41  REPROVA (AA pede 4,5)
     navy    sobre #6FADE0              → 7,25  passa
     branco  sobre #3987BF (azul médio) → 3,89  só passa em texto grande
     branco  sobre #2E6E93              → 5,57  passa

   Azul claro com letra branca é justamente a pior combinação das quatro. Então o
   pedido foi atendido pelo outro lado: o texto fica BRANCO e o azul de fundo desce
   para #2E6E93, que ainda é reconhecivelmente o azul do TAIVA e leva o contraste a
   5,57. É a mesma decisão que este projeto já tomou uma vez, quando recusou o
   `--taiva-blue` no ícone por medir 1,83 na aba clara.

   Fonte base sobe de 100% para 106,25% (17px), e o controle A−/A+ em `fonte.js`
   deixa a pessoa ir de 15px a 22px, com a escolha guardada. */
:root{
  /* Azul para SUPERFÍCIE COM TEXTO BRANCO. O #3987BF continua existindo para
     borda, ícone e detalhe — onde não há texto em cima, 3,89 é suficiente. */
  --azul-solido: #2E6E93;
  --azul: #3987BF;
}
/* O tamanho da raiz é definido por fonte.js, que é a única fonte de verdade —
   ver o comentário lá sobre os dois lugares disputando o mesmo número. */

/* Toda superfície azul deste projeto passa a usar o azul sólido com texto branco. */
.cit, .saude-num{
  background: var(--azul-solido) !important;
  color: #FFFFFF !important;
}
.conversa{ border-left-color: var(--azul-solido); }