/* Audit-X — identidade "Chapa": negatoscópio, filme, varredura.
   NÃO é a identidade da bpso (sem #2563eb, sem Poppins/Inter, sem dot-grid). */
:root {
  --ax-base:    #0b0f14;   /* fundo: negatoscópio desligado */
  --ax-painel:  #121820;
  --ax-filme:   #161d26;   /* superfície onde o achado "revela" */
  --ax-sinal:   #8fd3ff;   /* luz de varredura */
  --ax-texto:   #e6edf3;
  --ax-suave:   #93a4b3;
  --ax-borda:   #223041;
  --ax-critico: #ff5c5c;
  --ax-alto:    #ff9f43;
  --ax-medio:   #ffd166;
  --ax-ok:      #4ade80;
  --ax-display: 'Space Grotesk', system-ui, sans-serif;
  --ax-texto-f: 'IBM Plex Sans', system-ui, sans-serif;
  --ax-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* Derivados (o bloco acima é o contrato; estes são só conveniência local). */
:root {
  --ax-info:  var(--ax-sinal);   /* severidade "informativo" */
  --ax-raio:  4px;               /* canto clínico, não fofo */
  --ax-medida: 58ch;             /* medida de leitura */
}

/* ── Fontes self-hosted (baixadas do Google Fonts; nenhuma requisição externa) ── */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/space-grotesk-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;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/space-grotesk-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: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/plex-sans-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;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/plex-sans-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/plex-mono-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;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/plex-mono-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;
}

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

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

body {
  margin: 0;
  background: var(--ax-base);
  color: var(--ax-texto);
  font: 400 1.0625rem/1.65 var(--ax-texto-f);
  overflow-wrap: break-word;
}

a { color: var(--ax-sinal); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ax-sinal); outline-offset: 2px; border-radius: 2px; }

::selection { background: var(--ax-sinal); color: var(--ax-base); }

.ax-wrap { width: min(60rem, 100% - 2rem); margin-inline: auto; }

/* ── Barra do instrumento (não é a pílula de vidro da bpso: é régua de aparelho) ── */
.ax-barra {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--ax-borda);
}
.ax-marca {
  font: 700 1.05rem/1 var(--ax-display);
  letter-spacing: -.02em;
}
.ax-marca span { color: var(--ax-sinal); }
.ax-barra-info {
  margin-left: auto;
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font: 400 .68rem/1.4 var(--ax-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ax-suave);
}

/* ── Hero editorial (alinhado à esquerda, sem gradiente, sem trio de cards) ── */
.ax-hero { padding: clamp(2.5rem, 9vw, 4.5rem) 0 0; }

.ax-kicker {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font: 400 .7rem/1.4 var(--ax-mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ax-sinal);
}
.ax-kicker::before {
  content: ''; flex: 0 0 1.75rem; height: 1px;
  background: var(--ax-sinal);
}

h1 {
  margin: 0;
  font: 700 clamp(2.05rem, 8.5vw, 3.5rem)/1.04 var(--ax-display);
  letter-spacing: -.03em;
  max-width: 16ch;
}
h1 span { color: var(--ax-sinal); white-space: nowrap; } /* "seu site" não se parte na quebra */

.ax-sub {
  margin: 1.1rem 0 0;
  max-width: var(--ax-medida);
  color: var(--ax-suave);
}

.ax-spec {
  margin: 1.4rem 0 0;
  font: 400 .78rem/1.6 var(--ax-mono);
  color: var(--ax-suave);
}

/* ── O negatoscópio: a chapa entra aqui e a luz vem por trás ── */
.ax-painel {
  position: relative;
  margin: clamp(2rem, 6vw, 3rem) 0 0;
  padding: clamp(1.1rem, 4vw, 1.75rem);
  background-color: var(--ax-filme);
  /* grão de filme: só a chapa tem textura, a sala fica escura */
  background-image: repeating-linear-gradient(to bottom,
    rgba(230, 237, 243, .022) 0 1px, transparent 1px 6px);
  border: 1px solid var(--ax-borda);
  border-radius: var(--ax-raio);
  box-shadow:
    0 -20px 60px -34px color-mix(in srgb, var(--ax-sinal) 42%, transparent),
    0 30px 70px -50px #000;
}
/* a lâmpada correndo pela aresta de cima: o único motion ambiente da página */
.ax-painel::before {
  content: '';
  position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ax-sinal), transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: ax-lampada 7s linear infinite;
}
@keyframes ax-lampada {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}

.ax-rotulo {
  display: block; margin: 0 0 .55rem;
  font: 400 .7rem/1.4 var(--ax-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ax-suave);
}

.ax-linha-campo { display: flex; flex-wrap: wrap; gap: .6rem; }

#ax-url {
  flex: 1 1 14rem; min-width: 0;
  padding: .85rem .95rem;
  background: var(--ax-painel);
  color: var(--ax-texto);
  border: 1px solid var(--ax-borda);
  border-radius: var(--ax-raio);
  font: 400 1rem/1.25 var(--ax-mono);
  transition: border-color .18s ease;
}
#ax-url::placeholder { color: color-mix(in srgb, var(--ax-suave) 80%, transparent); }
#ax-url:focus { border-color: var(--ax-sinal); }

.ax-btn {
  flex: 0 0 auto;
  padding: .85rem 1.3rem;
  background: var(--ax-sinal);
  color: var(--ax-base);
  border: 1px solid var(--ax-sinal);
  border-radius: var(--ax-raio);
  font: 600 .95rem/1.25 var(--ax-texto-f);
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
.ax-btn:hover { background: color-mix(in srgb, var(--ax-sinal) 80%, #fff); }
.ax-btn:active { transform: translateY(1px); }
/* Enquanto uma auditoria roda o botão fica travado — o clique repetido rodava
   duas buscas, duplicava o laudo (inclusive na impressão) e gastava duas
   auditorias da cota do usuário. O estado precisa ser VISÍVEL, não só inerte. */
/* Leitura relacionada abaixo das ações do laudo — discreta, não compete com o CTA. */
/* Leitura relacionada no fim do laudo: UMA linha, com o link do post.
   Já foram duas linhas irmãs (post + panorama) coladas e com estilo idêntico — o
   olho lia como um item só e o post sumia atrás do panorama. O panorama saiu daqui
   porque a seção estática da página já o linka; sobrou uma linha, e uma linha não
   precisa de rótulo nem de lista. O filete separa das ações sem competir com elas. */
.ax-laudo-leitura {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ax-borda);
  font-size: .92rem;
  color: var(--ax-suave);
}
.ax-laudo-leitura a { color: var(--ax-sinal); }
@media print { .ax-laudo-leitura { display: none; } }

.ax-btn:disabled { opacity: .55; cursor: progress; }
.ax-btn:disabled:hover { background: var(--ax-sinal); }
.ax-btn:disabled:active { transform: none; }

.ax-ajuda {
  margin: .75rem 0 0;
  max-width: var(--ax-medida);
  font-size: .9rem;
  color: var(--ax-suave);
}

/* Nível 2: fica visivelmente apagado até a declaração ser marcada.
   A ética do produto é estrutura da interface, não texto miúdo. */
.ax-nivel2 {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px dashed var(--ax-borda);
  border-radius: var(--ax-raio);
  min-width: 0;
  transition: border-color .2s ease;
}
.ax-nivel2 > legend {
  padding: 0 .5rem;
  font: 400 .7rem/1.4 var(--ax-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ax-suave);
  transition: color .2s ease;
}
.ax-nivel2:has(#ax-tier2:checked) { border-style: solid; border-color: var(--ax-sinal); }
.ax-nivel2:has(#ax-tier2:checked) > legend { color: var(--ax-sinal); }

.ax-check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.ax-check input {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: .2rem 0 0;
  accent-color: var(--ax-sinal);
}
.ax-check span { font-weight: 600; }

/* ── Contêineres da varredura e do laudo (preenchidos pelo app.js) ── */
#ax-varredura:not(:empty),
#ax-laudo:not(:empty) { margin-top: clamp(1.75rem, 5vw, 2.5rem); }

/* ── Linhas da varredura progressiva ── */
.ax-item-varredura {
  display: flex; align-items: baseline; gap: .7rem;
  margin: 0; padding: .5rem 0;
  border-bottom: 1px solid var(--ax-borda);
  font: 400 .95rem/1.4 var(--ax-texto-f);
  animation: ax-revelar .3s ease both;
}
.ax-item-varredura:last-child { border-bottom: none; }

.ax-ponto {
  flex: 0 0 auto; width: .55rem; height: .55rem; margin: 0 .1rem 0 0;
  border-radius: 50%;
  background: var(--ax-suave); /* fallback: sobrescrito pelos modificadores abaixo */
}
.ax-ponto--critico { background: var(--ax-critico); }
.ax-ponto--alto    { background: var(--ax-alto); }
.ax-ponto--medio   { background: var(--ax-medio); }
.ax-ponto--info    { background: var(--ax-info); }
.ax-ponto--ok      { background: var(--ax-ok); }
.ax-ponto--na      { background: var(--ax-suave); }

.ax-item-nome { flex: 1 1 auto; }

.ax-item-estado {
  flex: 0 0 auto;
  font: 400 .7rem/1.4 var(--ax-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ax-suave);
}

@keyframes ax-revelar {
  from { opacity: 0; transform: translateY(.35rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Erro acessível ── */
.ax-erro {
  margin: 0; padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--ax-critico) 12%, var(--ax-filme));
  border: 1px solid var(--ax-critico);
  border-radius: var(--ax-raio);
  color: var(--ax-texto);
}

/* ── Laudo: cabeçalho, faixa de severidade, achados e aprovados ── */
.ax-laudo-cabecalho { margin: 0 0 1.5rem; }

.ax-laudo-cabecalho h2 {
  margin: 0 0 .35rem;
  font: 700 clamp(1.35rem, 4vw, 1.9rem)/1.15 var(--ax-display);
  letter-spacing: -.02em;
  max-width: var(--ax-medida);
}

.ax-laudo-data {
  margin: 0 0 1rem;
  font: 400 .78rem/1.4 var(--ax-mono);
  letter-spacing: .06em; color: var(--ax-suave);
}

.ax-laudo-veredito {
  margin: 0; padding: .85rem 1.1rem;
  background: var(--ax-filme);
  border: 1px solid var(--ax-borda);
  border-radius: var(--ax-raio);
  font: 600 1.05rem/1.4 var(--ax-texto-f);
}
.ax-laudo-veredito--critico { border-color: var(--ax-critico); color: var(--ax-critico); }
.ax-laudo-veredito--alto    { border-color: var(--ax-alto);    color: var(--ax-alto); }
.ax-laudo-veredito--ok      { border-color: var(--ax-ok);      color: var(--ax-ok); }

/* Faixa de contagem: reaproveita o .ax-ponto da varredura, nenhuma cor nova. */
.ax-faixa {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin: 1.4rem 0; padding: 0; list-style: none;
}
.ax-faixa-item {
  display: flex; align-items: center; gap: .45rem;
  font: 400 .82rem/1.3 var(--ax-mono); color: var(--ax-suave);
}

.ax-achado {
  margin: 0 0 1.1rem;
  padding: 1.1rem 1.25rem;
  background: var(--ax-filme);
  border: 1px solid var(--ax-borda);
  border-left: 3px solid var(--ax-suave);
  border-radius: var(--ax-raio);
}
.ax-achado--critico { border-left-color: var(--ax-critico); }
.ax-achado--alto    { border-left-color: var(--ax-alto); }
.ax-achado--medio   { border-left-color: var(--ax-medio); }
.ax-achado--info    { border-left-color: var(--ax-info); }

.ax-achado h3 {
  margin: 0 0 .6rem;
  font: 700 1.05rem/1.35 var(--ax-display);
  letter-spacing: -.01em;
}
.ax-achado p { margin: 0 0 .6rem; }
.ax-achado p:last-child { margin-bottom: 0; }
.ax-achado-rotulo {
  display: block; margin: 0 0 .2rem;
  font: 400 .68rem/1.4 var(--ax-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ax-suave);
}

/* Contexto comparativo: é dado da base, não parte do achado — lê como nota de
   rodapé do bloco, não como um quarto campo. */
.ax-achado-contexto {
  margin: .9rem 0 0 !important;
  padding-top: .7rem;
  border-top: 1px dashed var(--ax-borda);
  font: 400 .82rem/1.5 var(--ax-mono);
  color: var(--ax-suave);
}

/* Lista do bloco de higiene: um item por cabeçalho que falta. */
.ax-higiene-lista {
  margin: 0 0 .6rem; padding-left: 1.1rem;
  font: 400 .92rem/1.6 var(--ax-texto-f); color: var(--ax-texto);
}
.ax-higiene-lista li { margin: 0 0 .45rem; }
.ax-higiene-lista li:last-child { margin-bottom: 0; }

/* --- Panorama (retrato agregado da base) --- */
.ax-pano-rolagem { overflow-x: auto; }          /* tabela larga rola sozinha, a página não */
.ax-pano-tabela {
  width: 100%; border-collapse: collapse;
  font: 400 .92rem/1.5 var(--ax-texto-f);
}
.ax-pano-legenda {
  caption-side: bottom; padding-top: .8rem; text-align: left;
  font: 400 .82rem/1.5 var(--ax-texto-f); color: var(--ax-suave);
}
.ax-pano-tabela th, .ax-pano-tabela td {
  padding: .7rem .8rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--ax-borda);
}
.ax-pano-tabela thead th {
  font: 400 .68rem/1.4 var(--ax-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ax-suave);
}
.ax-pano-tabela tbody th { font: 600 .95rem/1.4 var(--ax-texto-f); color: var(--ax-texto); }
.ax-pano-medida { display: flex; align-items: center; gap: .7rem; min-width: 11rem; }
.ax-pano-barra {
  flex: 1 1 auto; height: .45rem; border-radius: 2px;
  background: linear-gradient(to right,
    var(--ax-alto) 0 var(--ax-pct), var(--ax-borda) var(--ax-pct) 100%);
}
.ax-pano-num  { font: 600 .95rem/1 var(--ax-mono); color: var(--ax-texto); min-width: 3ch; }
.ax-pano-base { font: 400 .82rem/1.4 var(--ax-mono); color: var(--ax-suave); white-space: nowrap; }

.ax-aprovados {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--ax-borda);
  border-radius: var(--ax-raio);
}
.ax-aprovados summary {
  cursor: pointer;
  font: 400 .85rem/1.4 var(--ax-mono);
  letter-spacing: .04em; color: var(--ax-suave);
}
.ax-aprovados ul { margin: .9rem 0 0; padding-left: 1.2rem; }
.ax-aprovados li { margin: 0 0 .4rem; }

.ax-laudo-acoes {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin: 1.75rem 0 0;
}
.ax-cta { display: inline-flex; align-items: center; text-decoration: none; }

/* Assinatura invisível na tela; só ganha conteúdo em @media print (abaixo). */
.ax-laudo-marca { margin: 0; }

/* ── FAQ (GEO): reaproveita .ax-achado (cartão) e a tipografia de .ax-laudo-cabecalho h2 ── */
.ax-faq { margin-top: clamp(3rem, 8vw, 5rem); }
.ax-titulo-secao {
  margin: 0 0 1.5rem;
  font: 700 clamp(1.4rem, 4vw, 2rem)/1.15 var(--ax-display);
  letter-spacing: -.02em;
}

/* ── Rodapé ── */
.ax-rodape {
  margin-top: clamp(3.5rem, 10vw, 6rem);
  padding: 1.6rem 0 2.5rem;
  border-top: 1px solid var(--ax-borda);
  color: var(--ax-suave);
  font-size: .92rem;
}
.ax-rodape p { margin: 0 0 .6rem; max-width: var(--ax-medida); }
.ax-rodape p:last-child { margin-bottom: 0; }
/* a assinatura é a única ponte com a marca: "bpso" fica minúsculo, como a marca é */
.ax-assinatura {
  font: 400 .82rem/1.5 var(--ax-mono);
  letter-spacing: .06em;
}

/* ── Telas estreitas ── */
@media (max-width: 30rem) {
  .ax-linha-campo { flex-direction: column; }
  /* em coluna, flex-basis vira ALTURA: zerar o basis do campo */
  #ax-url { flex: 0 0 auto; }
  .ax-btn { width: 100%; }
  .ax-barra-info { margin-left: 0; }
}

/* ── Motion tem interruptor ── */
@media (prefers-reduced-motion: reduce) {
  .ax-painel::before {
    animation: none;
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--ax-sinal) 55%, transparent), transparent);
    background-size: 100% 100%;
  }
  .ax-item-varredura { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Impressão: o laudo é o documento; o resto da interface não existe no papel. ── */
@media print {
  /* .ax-selo entra na lista porque o bloco do selo é uma OFERTA com botão: no
     papel o botão não clica, e o texto branco do .ax-btn sai branco no branco
     (medido: contraste 1.0, invisível). Oferta interativa não é parte do laudo. */
  header, footer, .ax-hero, #ax-form, #ax-varredura, #ax-imprimir, .ax-cta,
  .ax-laudo-acoes, .ax-faq, .ax-selo { display: none !important; }

  /* A linha de veredito é o cabeçalho do documento e usava a cor da severidade:
     laranja #ff9f43 sobre branco dá contraste 2.04 — medido no navegador, quase
     ilegível impresso. No papel a cor vira escura e a severidade fica na borda. */
  .ax-laudo-veredito { color: #111 !important; }
  .ax-laudo-veredito--critico { border-color: #c0392b !important; }
  .ax-laudo-veredito--alto    { border-color: #a35200 !important; }
  .ax-laudo-veredito--ok      { border-color: #1d6f3f !important; }
  :root { --ax-base: #fff; --ax-painel: #fff; --ax-filme: #fff;
          --ax-texto: #111; --ax-suave: #444; --ax-borda: #ccc; }
  body { background: #fff; color: #111; }
  #ax-laudo { display: block; max-width: none; }
  .ax-achado { break-inside: avoid; page-break-inside: avoid; }
  .ax-laudo-marca::after { content: "Laudo gerado por Audit-X — bpso.com.br/projetos/bp-auditx/"; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}