/* embutido.css — modo EMBUTIDO da busca (2026-08-03, pedido do dono).
 *
 * Ativado por `?embutido=1` (ver embutido.js), que põe a classe no <html>.
 * Fora dele, este arquivo não muda uma vírgula: todo seletor está sob
 * `.embutido`. O site autônomo continua com a marca dele (Jost, navy, logo).
 *
 * ---------------------------------------------------------------------------
 * O QUE ESTE ARQUIVO RESOLVE
 *
 * Dentro do chat a busca aparecia como "site dentro de site": DOIS cabeçalhos
 * (o painel "Buscar" do chat + a topbar da busca), a logo grande, o rodapé, e
 * uma pele visualmente estrangeira — outra fonte, outro cinza, outro azul.
 *
 * A correção NÃO é reescrever a busca: é (1) esconder a casca, que o painel do
 * chat já fornece, e (2) REDEFINIR OS TOKENS que a busca já usa. Como as
 * páginas todas se pintam por `--navy/--mist/--line/--sans/--mono`, trocar os
 * valores re-veste a aplicação inteira sem tocar em regra nenhuma — e sem
 * duplicar lógica, que é o que a Regra de Ouro Zero proíbe.
 *
 * `:root.embutido` (0,2,0) vence o `:root` (0,1,0) das folhas originais por
 * especificidade, então a ordem de carregamento deixa de ser armadilha.
 *
 * ---------------------------------------------------------------------------
 * CSP: por que não há `<style>` inline nem script inline em lugar nenhum
 *
 * A CSP da busca é `style-src 'self' 'sha256-…'` / `script-src 'self' 'sha256-…'`,
 * com os hashes dos blocos inline que já existem. Arquivo externo do próprio
 * domínio entra por `'self'` e NÃO exige recalcular hash nenhum. Mexer no
 * inline da home exigiria rodar `scripts/csp-hash.sh` e republicar — risco
 * desnecessário para um recurso que é puramente aditivo.
 */

/* Fontes do chat, servidas por este mesmo domínio (nunca CDN — a CSP é 'self'
   e domínio de terceiro no caminho do dado é proibido pela casa). Declaradas
   fora do bloco `.embutido` porque @font-face não pode ser aninhada em
   seletor; o USO delas é que fica escopado. */
@font-face {
  font-family: 'Inter Chat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/taiva/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Chat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/taiva/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk Chat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/taiva/fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Chat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/taiva/fonts/jetbrains-mono-400.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens ---
   Os MESMOS valores de `tokens.css` do chat. Ficam repetidos aqui porque os
   dois produtos são deploys separados (chat na delta, busca na sigma) e não
   compartilham build — importar de um no outro criaria dependência de deploy
   entre eles. Há teste de paridade do lado do chat; aqui vale o comentário:
   ao mudar a paleta do chat, mude este bloco junto. */
:root.embutido {
  --navy: #151b23;    /* texto principal */
  --navy-2: #5b6472;  /* texto secundário */
  --navy-3: #8d95a3;  /* metadado */
  --mist: #f3f5f7;    /* fundo base */
  --mist-2: #ebeff3;  /* superfície secundária (campos, chips) */
  --surface: #ffffff;
  --line: #dce2e8;
  --acento: #00a67a;  /* teal: sinal/ativo/CTA — o único acento */
  --sans: 'Inter Chat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk Chat', 'Inter Chat', sans-serif;
  --mono: 'JetBrains Chat', ui-monospace, 'SF Mono', monospace;
}

/* Tema escuro do chat — chega por `&tema=escuro`. Mesmos valores de
   `[data-theme='dark']` lá. */
:root.embutido.escuro {
  --navy: #e8edf2;
  --navy-2: #98a2b0;
  --navy-3: #6c7684;
  --mist: #10151b;
  --mist-2: #1f2833;
  --surface: #171e26;
  --line: #2a3441;
  --acento: #12c797;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- casca ---
   O painel do chat já tem "Buscar" e o fechar; o que duplicava era a
   NAVEGAÇÃO (Grupo TAIVA / Ajuda / Preferências) e o rodapé.

   A MARCA fica — pedido do dono depois de ver a primeira versão, e ele tem
   razão: sem ela o quadro vira uma caixa de texto anônima e não se sabe que
   busca é aquela. Some a navegação, não a identidade. */
:root.embutido .footer,
:root.embutido .topbar span,
:root.embutido .topbar a:not(.marca) {
  display: none !important;
}

/* Marca nas páginas internas (resultados, saúde): só o nome, em display. */
:root.embutido .topbar {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  justify-content: flex-start;
}

:root.embutido .topbar .marca {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}

/* Home: o lockup volta COMPACTO. O arquivo da logo é vertical (344×420), então
   sem teto de altura ele ocupava meia tela do painel — a razão de eu tê-lo
   escondido na primeira versão. Com altura fixa e o "Search" ao lado, ele vira
   assinatura de painel em vez de portal. */
/* Empilhado e CENTRADO (pedido do dono): o "Search" é subtítulo da marca, não
   um irmão dela ao lado. Em coluna, os dois leem como um lockup só — que é o
   que a palavra significa. */
:root.embutido .lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px auto 20px;
  text-align: center;
}

/* Terceira medida, calibrada com o dono na tela: 34px lia como assinatura de
   rodapé, 76px ainda ficou tímido. 112px dá presença de marca de produto.
   O `max-height: 26vh` continua sendo a trava que importa: o arquivo é
   VERTICAL (344×420), e sem teto proporcional a marca empurra o campo de
   busca para fora da primeira dobra em painel baixo — marca grande demais
   esconde a ferramenta, que é o defeito oposto. */
:root.embutido .lockup img {
  height: 112px;
  max-height: 26vh;
  width: auto;
}

/* "Search" volta a ser subtítulo: corpo pequeno, espaçado, em cinza — a marca
   é a logo; a palavra só diz qual produto da TAIVA é este. */
:root.embutido .lockup .sub {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  color: var(--navy-2);
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

:root.embutido body {
  background: var(--mist);
  color: var(--navy);
  font-family: var(--sans);
}

/* Sem a logo, a home não precisa mais empurrar o conteúdo para o meio da
   tela: o campo de busca sobe para o topo, como painel — não como portal. */
:root.embutido .stage {
  min-height: 0;
  padding-top: 14px;
  justify-content: flex-start;
}

/* Respiro menor: o painel do chat já tem a própria margem, e somar as duas
   deixava o conteúdo espremido numa coluna estreita.

   A margem ESQUERDA é maior de propósito: a aba de Favoritos é
   `position: fixed; left: 0` (favoritos.css) e, numa coluna estreita como a do
   painel, ela caía EM CIMA dos resultados — visto na tela pelo dono. Numa
   janela larga sobrava margem e o defeito não aparecia. Aqui o conteúdo cede a
   faixa que a aba ocupa, em vez de disputá-la. */
:root.embutido main,
:root.embutido .stage,
:root.embutido .cabeca,
:root.embutido .topbar {
  padding-left: 40px;
  padding-right: 14px;
}

/* E a própria aba encolhe: no painel ela é atalho, não elemento de página. */
:root.embutido .tv-alternar {
  padding: 9px 5px;
  font-size: 14px;
  top: 38vh;
}

/* --------------------------------------------------------- tipografia ----
   Título em display, metadado em mono — a mesma divisão de papéis do chat. */
:root.embutido h1,
:root.embutido h2,
:root.embutido h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root.embutido .url,
:root.embutido .dominio,
:root.embutido time,
:root.embutido .meta,
:root.embutido .fonte {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--navy-3);
}

/* -------------------------------------------------------------- campos ---
   Raio pequeno, hairline, foco teal: a mesma linguagem dos campos do chat. */
/* Campo BRANCO, e a causa do azul era ESTE ARQUIVO.
 *
 * O `.field` original (a pílula que embrulha o campo) já era `--surface`,
 * branco. A primeira versão daqui pintou o `input` de dentro com `--mist-2`
 * (azulado) e ainda lhe deu borda e raio próprios — ou seja, uma caixa azul
 * dentro de uma caixa branca. O dono viu na tela e reclamou com razão.
 *
 * Regra certa: quem desenha a caixa é o `.field`; o input dentro dele é
 * transparente e sem borda. Só campo SOLTO (sem pílula em volta) ganha
 * superfície própria — e ela é branca, nunca azulada: a linha de escrever é
 * onde a atenção começa e precisa se destacar do fundo. */
:root.embutido .field {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px; /* raio pequeno: nada de pílula (linguagem do redesign) */
  box-shadow: none;
  padding-left: 12px;
}

:root.embutido .field:focus-within {
  border-color: var(--acento);
  box-shadow: none;
}

:root.embutido .field input {
  background: transparent;
  border: 0;
  color: var(--navy);
  font-family: var(--sans);
}

/* Campos fora da pílula (filtros, preferências, Busca em Saúde). */
:root.embutido input[type='search']:not(.field input),
:root.embutido input[type='text']:not(.field input),
:root.embutido textarea,
:root.embutido select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--navy);
  font-family: var(--sans);
}

:root.embutido input:focus-visible,
:root.embutido textarea:focus-visible,
:root.embutido button:focus-visible,
:root.embutido a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Botão de buscar e afins: CTA teal sólido, como o "Enviar" do chat. */
:root.embutido button[type='submit'],
:root.embutido .botao-primario {
  background: var(--acento);
  border: 1px solid var(--acento);
  color: #ffffff;
  border-radius: 8px;
}

/* ----------------------------------------------------------- resultados ---
   Cada resultado é um bloco separado por hairline — sem sombra, sem cartão
   flutuante (MARCA do redesign: hairline faz a separação). */
:root.embutido .item,
:root.embutido .resultado {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 0;
}

:root.embutido .item a,
:root.embutido .resultado a {
  color: var(--navy);
}

:root.embutido .item h3 a:hover,
:root.embutido .resultado h3 a:hover {
  color: var(--acento);
}

/* Chips/abas ativas em teal — cor só onde significa "ativo". */
:root.embutido .abas a[aria-current='true'],
:root.embutido .abas a.ativa,
:root.embutido .chip.ativo {
  color: var(--acento);
  border-color: var(--acento);
}

/* A rolagem é do QUADRO: o painel do chat não rola junto, e duas barras de
   rolagem lado a lado eram outra denúncia de "site embutido". */
:root.embutido html,
:root.embutido body {
  height: auto;
}
