/* ===== site chrome — header/menu idêntico ao bassi.engineer (HUD) =======
   Componente COMPARTILHADO pelas páginas standalone do artigo (PT + EN).
   Marcação injetada por site-chrome.js. Escondido quando embedado no painel
   (iframe) — ali o próprio site já renderiza o header. Mesmas cores/fontes do
   HUD do site (base.css/hud.css): accent #6fd6ff, bg #03060f, JetBrains Mono. */
html.embedded .site-chrome { display: none; }
.site-chrome {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(3,6,15,0.96), rgba(3,6,15,0.86));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace;
  color: #f1f4ff;
}
/* A linha do topo QUEBRA quando não cabe, em vez de empurrar o conteúdo para
   fora da tela. Em tablet o cargo ("Engenheiro de IA & Plataforma") cabe, e é o
   bloco da direita — clima, viagem, relógio, bandeiras — que estoura: o chip
   ficava cortado no meio da palavra, na borda direita.

   Sem breakpoint de propósito. O bloco da direita cresce com o conteúdo (a
   viagem acrescenta "🚗 rumo a São Paulo" ao clima), então qualquer largura
   escolhida à mão erraria no dia em que o destino tivesse um nome mais longo.
   Com `flex-wrap`, ele desce para a segunda linha exatamente quando precisa. */
.sc-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 7px;
  gap: 1rem; padding: 13px clamp(16px, 1.8vw, 28px);
}

.sc-meta { min-width: 0; }
.sc-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; }
.sc-mark { color: #6fd6ff; font-size: 16px; text-shadow: 0 0 12px #6fd6ff; transform: translateY(-1px); }
.sc-name { color: #f1f4ff; font-weight: 600; font-size: 15px; letter-spacing: .10em; }
.sc-sep  { color: #3e4663; }
.sc-role { color: #6fd6ff; font-size: 13.5px; letter-spacing: .10em; }
.sc-meta { display: inline-flex; align-items: center; gap: 12px; color: #8e96b3; font-size: 13.5px; white-space: nowrap; }
.sc-clock { color: #f1f4ff; font-variant-numeric: tabular-nums; }
.sc-langs { display: inline-flex; gap: 6px; }
.sc-lang { padding: 3px 7px; border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; text-decoration: none; font-size: 17px; line-height: 1; opacity: .5; }
/* SVG, não emoji: o Windows não tem glifo de bandeira em fonte nenhuma do
   sistema, e o seletor virava duas caixinhas no Edge/Chrome de lá. */
.sc-flag { display: block; width: 19px; height: 13px; border-radius: 2px; }
.sc-lang:hover { opacity: .85; border-color: rgba(111,214,255,.3); }
.sc-lang.active { opacity: 1; border-color: rgba(111,214,255,.28); background: rgba(255,255,255,.02); }
.sc-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 18px;
  padding: 8px clamp(16px, 1.8vw, 28px) 11px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.sc-nav a { display: inline-flex; align-items: center; gap: 6px; color: #8e96b3; text-decoration: none; font-size: 12.5px; letter-spacing: .04em; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.sc-nav a i { color: #6fd6ff; opacity: .6; font-style: normal; font-size: 11px; }
.sc-nav a:hover { color: #f1f4ff; }
.sc-nav a.sc-ext { color: #6fd6ff; }
/* Tablet e telefone: o topo vira COLUNA, com o bloco da direita descendo para
   uma segunda linha alinhada à marca.

   900px é a soma medida do conteúdo, não um número redondo: marca 145px +
   cargo 250px + clima com viagem ~420px + o respiro das laterais. Abaixo
   disso, alguma das três pontas é cortada.

   Coluna explícita, e não só `flex-wrap`: com wrap o bloco desceria mantendo o
   alinhamento à direita, deixando uma faixa vazia à esquerda embaixo da marca —
   que é exatamente o buraco que o dono apontou na tela. */
@media (max-width: 900px) {
  .sc-top { flex-direction: column; align-items: flex-start; gap: 7px; }
  .sc-meta { width: 100%; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .sc-nav { gap: 5px 12px; }
  /* Telefone: o chip do clima cede antes do relógio e das bandeiras, que têm
     largura fixa e não têm como encolher. Sem isto, é o relógio que sai da
     tela. */
  .sc-wx { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* Só aqui o cargo sai — abaixo de 430px nem ele sozinho cabe ao lado da marca.
   O separador SAI JUNTO: sem isto, o topo mostrava `ANDREBASSI /` com uma barra
   apontando para um cargo que não está mais lá. Era o que aparecia no telefone,
   e o corte anterior o fazia em 720px, onde o cargo ainda cabia folgado. */
@media (max-width: 430px) {
  .sc-role, .sc-sep { display: none; }
}


/* ── Rolagem horizontal em telefone e tablet ──────────────────────────────
   Medido em 26/08/2026 num viewport de 386 px: o artigo empurrava a página
   52 px para o lado, e a rolagem lateral aparecia em toda a tela.

   Eram DUAS causas, e a primeira escondia a segunda — corrigir a tabela
   deixava o `scrollWidth` idêntico, porque o `<code>` sozinho já bastava:

   1. `<table>` de 413 px num viewport de 386. Vira bloco rolável, e o
      conteúdo passa a rolar DENTRO dela em vez de arrastar a página.
   2. `<code>` INLINE com identificador longo sem espaço — o caso real era
      `TestChoreographyVelocitiesWithinSafeEnvelope`, 402 px numa linha só.

   Os `<pre>` já estavam certos (`overflow-x: auto`) e não são tocados: o
   seletor `:not(pre) > code` alcança só o código no meio do texto, onde
   quebrar é o comportamento desejado. Dentro do bloco, quebrar linha de
   código mudaria o que ela significa. */
@media (max-width: 760px) {
  .wrap table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wrap :not(pre) > code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}