/* ══════════════════════════════════════════════════════════════════════════
 * PROPOSTA B — identidade forense, dark-first. A IDENTIDADE DO SITE.
 *
 * Esta folha é a Proposta B inteira, num arquivo só, POR CIMA do sistema,
 * linkada depois de styles.css em todas as páginas. Nada em styles.css, no
 * haruo-ds ou nos testes que os pinam foi alterado — o DS segue intacto e
 * `ds-sync --check` segue passando, porque este arquivo é CSS do produto,
 * não do sistema (a mesma regra que mantém `--redaction-bar` fora do
 * haruo-ds). Nasceu protótipo descartável ("remova o <link> e volta a A");
 * desde a conclusão da B ele é a identidade em produção, e o caminho de
 * volta passou a incluir também as og-images, os theme-color, o Swagger, a
 * status page e três classes de markup (plan-hot, o <em> do h1, Evidence na
 * nav) — reversível, mas por git revert, não por apagar um link.
 *
 * O QUE A DIREÇÃO DIZ (review de UX 2026-08-24, proposta-b.html): o produto
 * vende evidência de bytes, então o site parece o laboratório. Dark vira o
 * canvas da marca; o light continua existindo, mas como modo de leitura em
 * papel neutro frio, não como o padrão. O mono deixa de ser decoração e vira
 * assinatura: só ids, números e rótulos de instrumento. Um segundo tom
 * funcional (âmbar de severidade) entra ao lado do teal.
 *
 * O CONTRATO DE CASCATA, porque ele é a parte que pode quebrar calada:
 * styles.css declara três blocos de tema — `:root` (claro, o default de lá),
 * um bloco escuro dentro de `@media (prefers-color-scheme: dark)` guardado
 * por `:root:not([data-theme="light"])`, e `:root[data-theme="dark"]`. Os
 * dois escuros têm especificidade (0,2,0); o `:root` sozinho tem (0,1,0).
 * Esta folha carrega DOIS blocos, ambos a (0,2,0), e vem DEPOIS na ordem dos
 * <link>, então:
 *
 *   `:root:not([data-theme="light"])`  → B-dark. Vence o claro de styles.css
 *       por especificidade e os dois escuros de lá por ordem. Sem media
 *       query DE PROPÓSITO: é isso que inverte o default — sem escolha do
 *       visitante (e sem JavaScript), a página é escura, seja qual for o
 *       tema do SO. Linear e Resend fazem o mesmo: o canvas da marca não é
 *       uma preferência.
 *   `:root[data-theme="light"]`        → B-light. O toggle continua
 *       funcionando nos dois sentidos: cravar "Claro" dá o papel frio,
 *       cravar "Escuro" dá o dark (o primeiro bloco já o cobre), e o
 *       segmento "Auto" segue o SO DE VERDADE — theme.js resolve o
 *       prefers-color-scheme e CARIMBA o lado resolvido em data-theme
 *       (ausência de atributo já não pode significar "siga o SO", porque
 *       ausência é o default escuro da marca).
 *
 * O bloco B-dark redeclara o conjunto INTEIRO de tokens do bloco escuro de
 * styles.css (canônicos + aliases, 73 declarações), não só os que mudam.
 * Não é zelo: com o SO em claro e sem escolha do visitante, o bloco escuro
 * de styles.css não se aplica (está atrás do prefers-color-scheme), então
 * qualquer token que este bloco esquecer cai no valor CLARO do `:root` de
 * lá — um selo do Product Hunt claro numa página escura, uma tarja de
 * redação clara. O B-light só redeclara o que muda em relação ao claro do
 * DS, porque ali o `:root` de styles.css está por baixo, completo.
 *
 * CONTRASTE, medido com a mesma matemática de test/app/theme.test.ts antes
 * de escrever (WCAG AA, ≥4,5:1 texto e ≥3:1 gráficos de controle):
 *   B-dark : text/bg 17,0 · muted/bg 7,7 · faint/bg 7,0 · article/bg 13,0 ·
 *            on-accent/accent 9,1 · accent/bg 10,4 · âmbar/bg 10,9 ·
 *            high/bg 7,0 · code/poço 13,1 · control-edge 4,0–4,3
 *   B-light: text/bg 15,8 · muted/bg 5,8 · faint/bg 4,9 · article/bg 10,7 ·
 *            on-accent/accent 5,5 · accent/bg 5,1 · âmbar/bg 4,6 ·
 *            high/bg 6,0 · code/poço 11,6 · control-edge 3,1–3,6
 *
 * A DECISÃO DE PORTFÓLIO (2026-08-24, na conclusão da B): a Proposta B é uma
 * CAMADA LOCAL DO TAMPERLENS, não um tema do haruo-ds. O DS não muda um byte
 * — nem ganha um "tema Tamperlens". O preço aceito é o desta folha existir
 * para sempre por cima do styles.css (que segue espelhando o DS via ds-sync),
 * do mesmo jeito e pela mesma regra que mantêm `--redaction-bar` fora do DS:
 * token de produto vive no produto. Se um segundo produto da casa um dia
 * quiser o dark-first, aí sim vira conversa de DS — antes disso seria
 * abstração prematura com dois consumidores hipotéticos.
 * test/app/theme-b.test.ts pina o contrato desta camada.
 *
 * CORREÇÃO (2026-08-27) — o parágrafo acima dizia que "haruo.dev e o painel do
 * ai-smb-stack continuam no DS claro de sempre, e este produto é o único com
 * licença para o breu". Duas coisas mudaram:
 *
 *   1. A frase já era falsa quando foi escrita: o haruo.dev nunca esteve no DS
 *      claro. O BaseLayout dele crava `data-theme="dark"` desde antes da B, ou
 *      seja, ele estava no dark do DS — que é exatamente a Proposta A, o visual
 *      que este arquivo acabara de aposentar. O site da casa passou três dias
 *      parecendo a versão velha do produto que ele apresenta na home.
 *   2. O "segundo produto" chegou. Em 27/08/2026 o haruo.dev adotou o dark
 *      profundo em `src/theme-forense.css` (repo `haruo.dev`), copiando os
 *      valores desta folha — mesma técnica, mesmo contrato de cascata, mesma
 *      reversibilidade por um `@import`.
 *
 * A resposta à pergunta que o parágrafo acima deixou em aberto foi: AINDA NÃO
 * sobe para o DS. Promover o dark profundo arrastaria o painel do
 * ai-smb-stack junto, que ninguém pediu para escurecer. O preço é este
 * hexadecimal existir em dois repositórios — se um TERCEIRO consumidor
 * aparecer, a duplicação passa a custar mais que a abstração e a conversa de
 * DS acontece de verdade. Mexeu na paleta aqui? Mexa lá.
 *
 * O QUE ACOMPANHA A FOLHA (o resto da B, fora dela): o Swagger (/docs) e
 * status.tamperlens.com copiam os valores B nas folhas próprias
 * (swagger-theme.css, status/status.css); os <meta name="theme-color">
 * estáticos são uma tag escura incondicional (#0B0F0E, brand.test.ts); e as
 * og-images PNG renderizam no canvas escuro da marca (make-brand-assets.mjs
 * e make-blog-cover.mjs).
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── B-dark: o canvas da marca ─────────────────────────────────────────── */
:root:not([data-theme="light"]) {
  color-scheme: dark;

  /* Superfícies mais profundas que o dark atual (#0b0f0e vs #151a18): o
   * fundo é o breu do laboratório, o painel sobe pouco, o poço afunda. */
  --color-bg: #0b0f0e;
  --color-bg-raised: #121917;
  --color-bg-inset: #0e1413;
  --color-bg-code: #0f1d19;

  /* Hairlines um passo mais visíveis que as do dark A — a separação vem
   * de linha, não de sombra. */
  --color-border: #233029;
  --color-border-strong: #31413a;
  --color-control-edge: #6b7a73;

  --color-text: #ecf2ef;
  --color-text-article: #ccd6d1;
  --color-text-muted: #97a7a1;
  --color-text-faint: #8fa09a;
  --color-text-code: #d7e2dd;

  --color-accent: #2dd4bf;
  --color-accent-strong: #5eead4;
  --color-on-accent: #04211d;
  --color-accent-wash: rgba(45, 212, 191, 0.09);
  --color-accent-glow: rgba(45, 212, 191, 0.12);

  --color-ok: #4ade80;
  --color-ok-bg: rgba(74, 222, 128, 0.13);
  --color-ok-border: rgba(74, 222, 128, 0.36);
  --color-ok-text: #86efac;

  /* O ÂMBAR — o segundo tom funcional da direção. Substitui o amarelo
   * #fbbf24 do dark A por um âmbar mais quente e menos ácido. */
  --color-warn: #f5b84a;
  --color-warn-bg: rgba(245, 184, 74, 0.13);
  --color-warn-border: rgba(245, 184, 74, 0.38);
  --color-warn-text: #f9d48c;

  --color-danger: #f87171;
  --color-danger-bg: rgba(248, 113, 113, 0.13);
  --color-danger-border: rgba(248, 113, 113, 0.38);
  --color-danger-text: #fca5a5;

  --color-info: #97a7a1;
  --color-info-bg: rgba(151, 167, 161, 0.13);
  --color-info-border: rgba(151, 167, 161, 0.3);
  --color-info-text: #ccd6d1;

  /* Sombras mais fundas: sobre #0b0f0e a sombra do dark A some. */
  --color-menu-shadow: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);

  /* aliases curtos — o CSS já escrito usa --bg/--text/--accent; valor
   * literal como em styles.css, pela mesma razão de lá */
  --bg: #0b0f0e;
  --bg-raised: #121917;
  --bg-inset: #0e1413;
  --bg-code: #0f1d19;
  --border: #233029;
  --border-strong: #31413a;
  --control-edge: #6b7a73;
  --text: #ecf2ef;
  --text-article: #ccd6d1;
  --text-muted: #97a7a1;
  --text-faint: #8fa09a;
  --text-code: #d7e2dd;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --on-accent: #04211d;
  --accent-wash: rgba(45, 212, 191, 0.09);
  --accent-glow: rgba(45, 212, 191, 0.12);
  --menu-shadow: rgba(0, 0, 0, 0.6);
  --low: #4ade80;
  --low-bg: rgba(74, 222, 128, 0.13);
  --low-border: rgba(74, 222, 128, 0.36);
  --low-text: #86efac;
  --elevated: #f5b84a;
  --elevated-bg: rgba(245, 184, 74, 0.13);
  --high: #f87171;
  --high-bg: rgba(248, 113, 113, 0.13);
  --high-border: rgba(248, 113, 113, 0.38);
  --high-text: #fca5a5;
  --info: #97a7a1;
  --info-bg: rgba(151, 167, 161, 0.13);

  /* tokens do produto: a tarja e o selo do PH têm de virar junto (ver o
   * contrato de cascata no topo — sem isto, SO claro + sem escolha = selo
   * claro sobre página escura) */
  --redaction-bar: #04080a;
  --redaction-bar-edge: rgba(236, 242, 239, 0.45);
  --ph-badge-light: none;
  --ph-badge-dark: inline;

  /* tokens SÓ desta proposta (o "b-" evita colidir com o DS): o wash de
   * hover das tabelas-ledger e a cor plena de cada severidade, porque a
   * marca de severidade B é texto na cor pura, não chip sobre tinta. */
  --b-row-hover: rgba(45, 212, 191, 0.045);
  --b-sev-high: #f87171;
  --b-sev-elevated: #f5b84a;
  --b-sev-low: #4ade80;
  --b-sev-info: #97a7a1;
}

/* ── B-light: papel neutro frio, o modo de leitura ─────────────────────────
 * Só o que muda em relação ao claro do DS: o papel quente #faf9f6 esfria
 * para #f7f6f2 (o calor briga com a leitura "instrumento de precisão"),
 * as hairlines sobem um passo (era a reclamação medida do light: borda
 * 1,2:1 sobre papel), e o control-edge desce para seguir ≥3:1 sobre as
 * superfícies levemente mais escuras (3,12 no inset; o #8f8b7a do DS daria
 * 3,00 cravado). Acento, severidades e tipografia ficam como no DS. */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f7f6f2;
  --color-bg-raised: #ffffff;
  --color-bg-inset: #f1f0ec;
  --color-bg-code: #edece6;
  --color-border: #d9d6cd;
  --color-border-strong: #c9c6bb;
  --color-control-edge: #8c8876;
  --color-text: #171d1b;

  --bg: #f7f6f2;
  --bg-raised: #ffffff;
  --bg-inset: #f1f0ec;
  --bg-code: #edece6;
  --border: #d9d6cd;
  --border-strong: #c9c6bb;
  --control-edge: #8c8876;
  --text: #171d1b;

  --b-row-hover: rgba(15, 118, 110, 0.05);
  --b-sev-high: #b91c1c;
  --b-sev-elevated: #b45309;
  --b-sev-low: #15803d;
  --b-sev-info: #5a625e;
}

/* ══════════════════════════════════════════════════════════════════════════
 * A GRAMÁTICA B — regras de componente, escritas UMA vez em token, então
 * valem nos dois temas (a mesma disciplina de styles.css: nenhum override
 * por tema daqui para baixo).
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Nav no nível do canvas ────────────────────────────────────────────────
 * A barra deixa o poço (--bg-inset) e senta no próprio canvas, separada por
 * hairline — no dark profundo, um poço ainda mais escuro lia como buraco. */
.topnav {
  background: var(--bg);
}

.topnav-links a.cta {
  font-weight: 700;
  border-radius: 8px;
}

/* ── Hero: canvas + halo de instrumento ────────────────────────────────────
 * O glow sobe para o canto do painel de evidência (o lado direito do hero
 * da home) e fica mais presente que o da A — no breu, 0.055 de alpha era
 * invisível; o token B-dark já carrega 0.12. */
.hero {
  background:
    radial-gradient(70rem 26rem at 78% -18%, var(--accent-glow), transparent 62%),
    var(--bg);
}

/* O kicker mono da direção ("// document trust api"), só no hero da home
 * (EN e PT — .hero-copy existe apenas lá; homepage.test.ts garante isso).
 * Vive num pseudo-elemento DE PROPÓSITO: é marca desta proposta, não
 * conteúdo — some com o <link>, não entra no orçamento de palavras da home
 * e não cria par de tradução. O `/ ""` esvazia o texto alternativo para
 * leitores de tela; navegador antigo que não conhece a sintaxe descarta a
 * declaração inteira e perde só o enfeite. */
.hero-copy h1::before {
  content: "// document trust api" / "";
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* O <em> do h1 ("edited"/"editado") assina em teal — a palavra que o produto
 * existe para responder é a única com cor no headline. Sem itálico: é ênfase
 * de marca, não de prosa. Título ≥2.4rem, então até o teal do B-light (5,1:1)
 * passa AA large-text com folga. */
.hero-copy h1 em {
  font-style: normal;
  color: var(--accent);
}

/* O spec panel vira leitura de instrumento: rótulo E valor em mono, linhas
 * tracejadas — o mesmo registro do relatório que o produto devolve. */
.spec-panel {
  gap: 0;
}

.spec-row dt {
  font-family: var(--mono);
  letter-spacing: 0.1em;
}

.spec-row dd {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text);
}

.spec-row + .spec-row {
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}

/* O card de reveal ganha a testeira de dossiê: a legenda vira faixa mono
 * sobre o poço, colada nas bordas do card (margens negativas anulam o
 * padding de .reveal — se aquele padding mudar, mude aqui junto). */
.reveal-cap {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  margin: -1.15rem -1.25rem 0.9rem;
  padding: 0.55rem 1.25rem;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* ── Tabelas-ledger ────────────────────────────────────────────────────────
 * Sem faixa no thead, sem zebra: hairline + hover wash. O th vira rótulo de
 * instrumento (mono espaçado); o corpo continua sans 0.95rem da A — mono no
 * CONTEÚDO só onde já é dado (<code>), que agora assina em teal. É a tabela
 * de erros do /api-reference, o fit do /pricing e as chaves do dashboard,
 * de uma vez. */
.tl-table th {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.tl-table thead th {
  background: transparent;
}

.tl-table tbody tr:hover td {
  background: var(--b-row-hover);
}

.tl-table code {
  color: var(--accent);
}

/* ── Severidade como marca de ledger ───────────────────────────────────────
 * O chip-pílula vira carimbo: mono maiúsculo na cor plena da severidade,
 * quadradinho no lugar do ponto. A palavra segue sendo o portador (regra do
 * DS); o que sai é a moldura. As cores vêm dos tokens --b-sev-* declarados
 * por tema (plenas no dark, as -text escuras no light), todas ≥4,5:1 sobre
 * canvas e painel. */
.severity-chip {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  gap: 0.4rem;
}

.severity-chip::before {
  border-radius: 2px;
}

.severity-chip.severity-high {
  color: var(--b-sev-high);
  background: transparent;
}
.severity-chip.severity-medium {
  color: var(--b-sev-elevated);
  background: transparent;
}
.severity-chip.severity-low {
  color: var(--b-sev-low);
  background: transparent;
}
.severity-chip.severity-info {
  color: var(--b-sev-info);
  background: transparent;
}

/* O veredito das /alternatives no mesmo registro: carimbo mono, teal quando
 * é nosso. */
.alt-table .verdict-chip {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.alt-table .verdict-chip.verdict-us {
  color: var(--accent);
  background: transparent;
}

/* ── /pricing como ledger: uma linha por plano ─────────────────────────────
 * A proposta literal: "pricing como ledger de uma linha por plano — combina
 * com you pay for volume, never for better detection". Os quatro cards (e as
 * duas linhas de créditos avulsos) viram linhas de um livro-razão: nome,
 * preço em mono-teal, franquia, nota, CTA. Escopado a .pricing-body para o
 * upsell do dashboard não virar ledger junto. O markup não muda — é o mesmo
 * .plan-card que a A estiliza como card; remova esta folha e os cards
 * voltam. */
.pricing-body .plan-cards {
  display: block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pricing-body .plan-card {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(10rem, 13rem) 1fr auto;
  grid-template-areas:
    "name quota note cta"
    "price quota note cta";
  column-gap: 1.25rem;
  align-items: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.85rem 1.1rem;
}

.pricing-body .plan-card + .plan-card {
  border-top: 1px solid var(--border);
}

.pricing-body .plan-card:hover {
  background: var(--b-row-hover);
}

/* A linha "hot" do ledger — o Solo, o plano que a maioria compra primeiro.
 * Wash teal permanente + régua de acento na borda de leitura: destaque de
 * livro-razão, não um card "MAIS POPULAR" gritando. A classe (plan-hot) vive
 * no markup de /pricing e /pt/precos; fora desta folha ela não faz nada, e é
 * por isso que a A não muda com ela. */
.pricing-body .plan-card.plan-hot {
  background: var(--b-row-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.pricing-body .plan-card h3 {
  grid-area: name;
  margin: 0;
  font-size: 1rem;
}

/* O preço é DADO — a única exceção viva à regra "mono nunca em preço" da A,
 * porque aqui ele é uma célula de ledger, não o headline de um card. */
.pricing-body .plan-card .price {
  grid-area: price;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  margin: 0;
}

.pricing-body .plan-card .price .price-period {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-faint);
}

.pricing-body .plan-card .quota {
  grid-area: quota;
  margin: 0;
  font-size: 0.9rem;
}

.pricing-body .plan-card .plan-note {
  grid-area: note;
  margin: 0;
  font-size: 0.9rem;
}

.pricing-body .plan-card .btn {
  grid-area: cta;
  justify-self: end;
  align-self: center;
  width: auto;
}

/* Abaixo de 700px o ledger recolhe para linhas empilhadas: nome + preço na
 * mesma linha, franquia e nota abaixo, CTA em largura cheia — a tabela de
 * 5 colunas não cabe, e rolagem horizontal em página de compra é atrito. */
@media (max-width: 700px) {
  .pricing-body .plan-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name price"
      "quota quota"
      "note note"
      "cta cta";
    row-gap: 0.3rem;
    align-items: baseline;
  }

  .pricing-body .plan-card .btn {
    justify-self: stretch;
    width: 100%;
    margin-top: 0.4rem;
  }
}

/* ── Botões no peso da direção ─────────────────────────────────────────── */
.btn {
  font-weight: 700;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * O RELATÓRIO COMO DOSSIÊ — a gramática B nos apps embutidos (checker,
 * compare, metadata, dashboard). O laudo é o herói do produto; nesta direção
 * ele vira a identidade inteira. As mesmas três decisões das páginas já
 * feitas, aplicadas aos cards que o JS desenha:
 *
 *   1. TESTEIRAS DE INSTRUMENTO — todo título interno de card (Facts,
 *      Signals, os panel-heads do dashboard) vira rótulo mono espaçado, o
 *      mesmo registro do th das tabelas-ledger.
 *   2. CARIMBO, NÃO PÍLULA — banda de risco, chips do compare, badge de
 *      plano: mono maiúsculo na cor plena, quadradinho no lugar do ponto,
 *      moldura só onde o carimbo é tinta cheia (SAMPLE / YOUR FILE).
 *   3. MONO SÓ EM DADOS — os rótulos que já eram uppercase-faint continuam
 *      rótulos; o que muda de fonte é o que o arquivo mesmo diz (chaves,
 *      ids, valores), nunca a frase ao lado.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Testeiras: os h3 de Facts/Signals já são faixas com borda; ganham o poço e
 * a voz mono do ev-head da proposta. */
.facts h3,
.signals h3 {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  background: var(--bg-inset);
}

/* O rótulo de cada fato é rótulo de instrumento; o valor (dd) já é mono. */
.fact dt {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* A linha do laudo responde ao olho como a linha do ledger. */
.signal-card:hover,
.signal:hover {
  background: var(--b-row-hover);
}

/* Os findings do compare eram divs sem régua nenhuma dentro do panel; viram
 * linhas de ledger como os signal-cards do checker (só o compare-app.js usa
 * .signal). */
.signal {
  padding: 0.75rem 0;
}

.signal + .signal {
  border-top: 1px solid var(--border);
}

/* O mostrador do score: de medidor circular de app para carimbo de dossiê —
 * tile quadrado, mono, 2px na cor da banda, sobre o poço. O markup não muda
 * (report-render.js segue desenhando .risk-dial). */
.risk-dial {
  border-radius: 10px;
  border-width: 2px;
  background: var(--bg-inset);
}

/* A banda vira carimbo como a severidade: mono maiúsculo na cor plena,
 * quadradinho como marca — a palavra segue sendo o portador. */
.risk-band-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
}

.risk-band-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}

.risk-band-label.band-low {
  color: var(--b-sev-low);
  background: transparent;
}
.risk-band-label.band-elevated {
  color: var(--b-sev-elevated);
  background: transparent;
}
.risk-band-label.band-high {
  color: var(--b-sev-high);
  background: transparent;
}

/* Os carimbos de procedência seguem tinta cheia (SAMPLE precisa gritar),
 * mas assinam como carimbo: canto quase reto e respiro de máquina. */
.provenance-tag,
.meta-provenance-label {
  border-radius: 3px;
  letter-spacing: 0.1em;
}

/* A tarja de redação do laudo usa o token da marca em vez do dark antigo
 * cravado (#151a18 sumia sobre o painel B); a aresta clara vem do token que
 * o bloco B-dark já declara — no light ela resolve para transparent. */
.redacted-bar {
  background: var(--redaction-bar);
  box-shadow: inset 0 0 0 1px var(--redaction-bar-edge);
}

/* O selo "changed page" da timeline de revisões, no mesmo registro. */
.rev-flag {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* ── Compare: os findings assinam como o laudo ─────────────────────────────
 * compare-app.js desenha <span class="chip sev-*"> — até aqui caíam no .chip
 * neutro. Viram o mesmo carimbo do severity-chip do checker. */
.chip.sev-high,
.chip.sev-medium,
.chip.sev-low,
.chip.sev-info {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chip.sev-high::before,
.chip.sev-medium::before,
.chip.sev-low::before,
.chip.sev-info::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}

.chip.sev-high {
  color: var(--b-sev-high);
}
.chip.sev-medium {
  color: var(--b-sev-elevated);
}
.chip.sev-low {
  color: var(--b-sev-low);
}
.chip.sev-info {
  color: var(--b-sev-info);
}

/* ── Dashboard e panels: testeira mono nos títulos de seção ────────────────
 * .panel-head h2 já era o rótulo uppercase-faint de toda seção de app (Plan,
 * API keys, Usage by day, os panels do compare). Ganha a voz do th-ledger. */
.panel-head h2 {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* A barra de quota é instrumento, não progresso de app: cantos quase retos. */
.usage-bar {
  border-radius: 3px;
}

/* O badge de plano assina como o "engine v1" do lockup: mono, hairline na
 * própria cor (border sem cor herda currentColor), sem tinta de fundo. */
.plan-badge {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
}

.plan-badge.plan-team,
.plan-badge.plan-business {
  background: transparent;
}

/* Os chips de container do viewer de metadados: mesmo mono, canto de
 * instrumento. */
.meta-chip {
  border-radius: 4px;
}