/* Página do WaitScope. Tokens iguais aos da console (IBM Carbon): cinzas,
   azul só em ação, cantos retos. Tema escuro segue o sistema. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --layer: #f4f4f4;
  --layer-2: #ffffff;
  --border: #e0e0e0;
  --border-strong: #8d8d8d;
  --text: #161616;
  --text-2: #525252;
  --text-3: #6f6f6f;
  --interactive: #0f62fe;
  --interactive-hover: #0050e6;
  --link: #0f62fe;
  --focus: #0f62fe;
  --shell: #161616;
  --shell-text: #f4f4f4;
  --shell-text-2: #c6c6c6;
  --shell-border: #393939;
  --shell-hover: #2c2c2c;
  --inverse: #161616;
  --inverse-text: #f4f4f4;
  --inverse-text-2: #c6c6c6;
  --inverse-border: #393939;
  --bar: #0f62fe;
  --warning: #f1c21b;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --layer: #1f1f1f;
    --layer-2: #262626;
    --border: #393939;
    --border-strong: #6f6f6f;
    --text: #f4f4f4;
    --text-2: #c6c6c6;
    --text-3: #a8a8a8;
    --interactive: #0f62fe;
    --interactive-hover: #0050e6;
    --link: #78a9ff;
    --focus: #ffffff;
    --inverse: #262626;
    --inverse-border: #525252;
    --bar: #4589ff;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.5 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { color: var(--interactive-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
p { margin: 0; }
code, pre { font-family: var(--mono); letter-spacing: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--interactive); color: #fff; padding: .75rem 1rem; }
.pular:focus { top: .5rem; color: #fff; }

.faixa { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 42rem) { .faixa { padding: 0 2rem; } }
.estreita > * { max-width: 52rem; }

/* Barra do topo: a mesma da console. */
.topo { position: sticky; top: 0; z-index: 10; background: var(--shell); color: var(--shell-text); border-bottom: 1px solid var(--shell-border); }
.topo .faixa { display: flex; align-items: stretch; height: 3rem; }
.topo .marca { display: flex; align-items: center; gap: .5rem; color: var(--shell-text); font-weight: 600; text-decoration: none; }
/* Celular estreito: só o símbolo, para Entrar e o botão caberem numa linha. */
@media (max-width: 22rem) { .topo .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 40rem) { .topo .marca { padding-right: 1.5rem; } }
.topo a { text-decoration: none; }
.secoes { display: none; margin-right: auto; }
.secoes a, .idiomas a { display: inline-flex; align-items: center; padding: 0 .875rem; color: var(--shell-text-2); font-size: .875rem; }
.secoes a:hover, .idiomas a:hover { background: var(--shell-hover); color: var(--shell-text); }
.idiomas { display: none; }
.idiomas a[aria-current] { color: var(--shell-text); box-shadow: inset 0 -2px 0 var(--shell-text); }
/* Entrar leva à console; fica sempre à vista, antes do botão. */
.topo .entrar { display: inline-flex; align-items: center; margin-left: auto; padding: 0 .75rem; color: var(--shell-text); font-size: .875rem; white-space: nowrap; }
.topo .entrar:hover { background: var(--shell-hover); color: var(--shell-text); }
@media (min-width: 40rem) { .idiomas { display: flex; margin-left: auto; } .topo .entrar { margin-left: 0; padding: 0 1rem; } }
@media (min-width: 66rem) { .secoes { display: flex; } .idiomas { margin-left: 0; } }

/* Botões no padrão Carbon: retos, texto à esquerda. */
.botao { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 2.5rem 0 1rem; background: var(--interactive); color: #fff; font-size: 1rem; text-decoration: none; border: 0; }
.botao:hover { background: var(--interactive-hover); color: #fff; }
.botao.secundario { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px currentColor; }
.botao.secundario:hover { background: var(--interactive); color: #fff; }
.topo .botao { min-height: 0; padding: 0 .75rem; font-size: .875rem; white-space: nowrap; }
@media (min-width: 40rem) { .topo .botao { padding: 0 3rem 0 1rem; } }

/* Abertura: o texto e o recibo do tempo de resposta. */
.abertura { background: var(--layer); border-bottom: 1px solid var(--border); padding: 2.5rem 0 3rem; }
.abertura-grade { display: grid; gap: 2.5rem; }
.abertura-grade > * { min-width: 0; }
@media (min-width: 42rem) { .abertura { padding: 3rem 0 4rem; } .abertura-grade { gap: 3rem; } }
@media (min-width: 66rem) {
  .abertura { padding: 5rem 0 6rem; }
  .abertura-grade { grid-template-columns: 5fr 7fr; align-items: start; gap: 4rem; }
}
h1 { font-weight: 300; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.12; max-width: 15ch; }
.lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.5; color: var(--text-2); max-width: 34rem; }
@media (min-width: 42rem) { .lead { margin-top: 1.5rem; font-size: 1.25rem; } }
/* No celular os botões ocupam a linha toda, um embaixo do outro. */
.acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.acoes .botao { flex: 1 1 100%; }
@media (min-width: 40rem) { .acoes .botao { flex: 0 0 auto; } }
.nota { margin-top: 1.5rem; font-size: .875rem; color: var(--text-2); max-width: 34rem; padding-left: .75rem; border-left: 2px solid var(--border-strong); }

/* No celular o recibo vai de borda a borda, para caber o perfil. */
.recibo { margin: 0 -1rem; background: var(--layer-2); border: 1px solid var(--border); border-width: 1px 0; }
@media (min-width: 42rem) { .recibo { margin: 0; border-width: 1px; } }
.recibo-rotulo { font-size: .75rem; color: var(--text-3); margin-bottom: .75rem; }
.recibo-trace { padding: 1rem 1rem .875rem; border-bottom: 1px solid var(--border); }
/* Cada registro do trace em um bloco; o que não cabe quebra com recuo. */
.trace code { display: block; padding-left: 2ch; text-indent: -2ch; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.trace code + code { margin-top: .25rem; }
.trace .t { color: var(--text-3); }
.trace b { font-weight: 400; color: var(--text); background: var(--layer); box-shadow: inset 0 -2px 0 var(--bar); white-space: nowrap; }
.recibo-perfil { padding: 1rem; }
.recibo table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.recibo thead th { font-weight: 400; color: var(--text-3); font-size: .75rem; text-align: left; padding: 0 0 .5rem; }
.recibo tbody th, .recibo tfoot th { text-align: left; font-weight: 400; padding: .5rem 1rem .5rem 0; overflow-wrap: anywhere; }
.recibo td { padding: .5rem 0; }
.recibo .num { text-align: right; white-space: nowrap; padding-left: .75rem; }
/* Barra: embaixo do nome no celular, em coluna própria a partir de 40rem. */
.recibo tbody tr:nth-child(1) { --p: 71.3%; }
.recibo tbody tr:nth-child(2) { --p: 18.5%; --atraso: .08s; }
.recibo tbody tr:nth-child(3) { --p: 4.1%; --atraso: .16s; }
.recibo tbody tr:nth-child(4) { --p: 2.8%; --atraso: .24s; }
.recibo tbody tr:nth-child(5) { --p: 3.3%; --atraso: .32s; }
.recibo .barra { display: none; width: 40%; }
.recibo .barra span, .recibo tbody th::after { display: block; height: .5rem; background: var(--bar); width: var(--p); transform-origin: left center; animation: cresce .9s cubic-bezier(.2, 0, .38, .9) both; animation-delay: var(--atraso, 0s); }
.recibo tbody th::after { content: ""; height: .375rem; margin-top: .375rem; }
@media (min-width: 40rem) {
  .recibo .barra { display: table-cell; }
  .recibo tbody th::after { content: none; }
  .recibo tbody th, .recibo tfoot th, .recibo td { padding-top: .4rem; padding-bottom: .4rem; }
}
.recibo tbody tr + tr { border-top: 1px solid var(--border); }
.recibo tfoot tr { border-top: 1px solid var(--border-strong); }
.recibo tfoot th, .recibo tfoot .num { font-weight: 600; padding-top: .6rem; }
@keyframes cresce { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .recibo .barra span, .recibo tbody th::after { animation: none; } }
.achado { margin-top: 1.25rem; padding: .75rem 1rem; background: var(--layer); border-left: 3px solid var(--warning); font-size: .875rem; color: var(--text-2); }
.achado strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .25rem; }
.recibo figcaption { padding: .75rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-3); }
@media (min-width: 42rem) {
  .recibo-trace { padding: 1.25rem 1.25rem 1rem; }
  .recibo-perfil { padding: 1.25rem; }
  .recibo figcaption { padding: .75rem 1.25rem; }
}

/* Seções. */
.secao { padding: 3rem 0; }
@media (min-width: 42rem) { .secao { padding: 4rem 0; } }
@media (min-width: 66rem) { .secao { padding: 6rem 0; } }
.alternada { background: var(--layer); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
h2 { font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem); line-height: 1.2; max-width: 24ch; }
.intro { margin-top: 1rem; font-size: 1.125rem; line-height: 1.55; color: var(--text-2); max-width: 42rem; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }

/* Passos: é uma sequência, por isso o número. */
.passos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem; counter-reset: passo; }
.passos > li { min-width: 0; counter-increment: passo; border-top: 1px solid var(--border-strong); padding-top: 1rem; }
.passos > li::before { content: counter(passo); display: block; font-weight: 300; font-size: 2rem; line-height: 1; margin-bottom: .75rem; color: var(--text-2); }
.passos p { margin-top: .5rem; color: var(--text-2); }
@media (min-width: 42rem) {
  .passos { margin-top: 3rem; gap: 2.5rem; }
  .passos > li { padding-top: 1.25rem; }
  .passos > li::before { font-size: 2.5rem; margin-bottom: 1rem; }
}
@media (min-width: 66rem) { .passos { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.codigo { margin: 1.25rem 0 0; padding: 1rem; background: var(--layer); border: 1px solid var(--border); overflow-x: auto; font-size: .75rem; line-height: 1.6; }
@media (min-width: 42rem) { .codigo { font-size: .8125rem; } }

/* Relatório. */
.captura { margin: 2rem 0 0; }
.captura img { border: 1px solid var(--border); background: var(--layer-2); }
.captura figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--text-2); }
.itens { display: grid; gap: 2rem 3rem; margin-top: 2rem; }
@media (min-width: 42rem) { .captura, .itens { margin-top: 3rem; } }
.itens > div { border-top: 1px solid var(--border-strong); padding-top: 1rem; }
.itens p { margin-top: .5rem; color: var(--text-2); font-size: .9375rem; }
@media (min-width: 42rem) { .itens { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .itens { grid-template-columns: 1fr 1fr 1fr; } }

/* Privacidade: faixa invertida. */
.inversa { background: var(--inverse); color: var(--inverse-text); }
.inversa .intro { color: var(--inverse-text-2); }
.fatos { margin: 2rem 0 0; display: grid; gap: 2rem 3rem; }
@media (min-width: 42rem) { .fatos { margin-top: 3rem; } }
.fatos > div { border-top: 1px solid var(--inverse-border); padding-top: 1rem; }
.fatos dt { font-weight: 600; font-size: 1.125rem; }
.fatos dd { margin: .5rem 0 0; color: var(--inverse-text-2); }
@media (min-width: 42rem) { .fatos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .fatos { grid-template-columns: 1fr 1fr 1fr; } }

/* Perguntas: details nativo, sem script. */
#perguntas h2 { margin-bottom: 2rem; }
details { border-top: 1px solid var(--border); }
details:last-of-type { border-bottom: 1px solid var(--border); }
summary { cursor: pointer; list-style: none; padding: 1rem 2.5rem 1rem 0; position: relative; font-size: 1.125rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: .5rem; top: 1.45rem; width: .5rem; height: .5rem; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); transition: transform .15s; }
details[open] summary::after { transform: rotate(-135deg); top: 1.65rem; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
summary:hover { background: var(--layer); }
details p { padding: 0 2.5rem 1.25rem 0; color: var(--text-2); max-width: 46rem; }

.chamada { background: var(--layer); border-top: 1px solid var(--border); }

.rodape { background: var(--shell); color: var(--shell-text-2); font-size: .875rem; padding: 2.5rem 0; }
.rodape a { color: var(--shell-text); }
.rodape-grade { display: grid; gap: .5rem; }
.rodape .marca { display: flex; align-items: center; gap: .5rem; color: var(--shell-text); font-weight: 600; font-size: 1rem; }
/* Links com altura de toque (44px) no celular. */
.rodape a { display: inline-block; padding: .75rem 0; }
.rodape nav a { margin-right: 1.25rem; }
@media (min-width: 66rem) { .rodape-grade { grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2rem; } }