/*
 * Página de benchmark e shortcode [stealth_bench].
 * Carregado só onde é usado (fellipe_soares_bench_maybe_enqueue()), por isso
 * fora do style.css: não pesa nas outras páginas nem no orçamento dele.
 * Cores só por token; a versão escura de cada token fica nos dois blocos do
 * fim do :root, como no style.css. A codificação dos gráficos é
 * monocromática: âmbar (modelo stealth), contorno (referência paga) e
 * hachura (prova pendente) — sem cor de série por modelo.
 */

:root {
  --fs-bench-grid: #e9e6df;
  --fs-bench-pending: #efece5;
  --fs-bench-row-hover: #faf9f6;
  --fs-bench-bad: #b3261e;
  /* Cinza das linhas fora do destaque (`highlight` do shortcode). */
  --fs-series-muted: #77736b;
  --fs-bench-notice-bg: #fff7d6;
  --fs-bench-notice-line: #e6c84f;
  /* Títulos da página: a folha base (Paper) só define até text-lg, e estes
     três níveis existiam só na folha antiga. Mesmos valores que lá tinham. */
  --fs-text-xl: 1.5rem;  /* 24px — subtítulo de destaque */
  --fs-text-2xl: 2rem;   /* 32px — título de seção */
  --fs-text-4xl: 3.5rem; /* 56px — display */
}

:root[data-theme="dark"] {
  --fs-bench-grid: #2c2a35;
  --fs-bench-pending: #24222b;
  --fs-bench-row-hover: #201f28;
  --fs-bench-bad: #ff8a80;
  --fs-series-muted: #8d8996;
  --fs-bench-notice-bg: #2e2a14;
  --fs-bench-notice-line: #8a7420;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fs-bench-grid: #2c2a35;
    --fs-bench-pending: #24222b;
    --fs-bench-row-hover: #201f28;
    --fs-bench-bad: #ff8a80;
    --fs-series-muted: #8d8996;
    --fs-bench-notice-bg: #2e2a14;
    --fs-bench-notice-line: #8a7420;
  }
}

.bench {
  color: var(--fs-ink);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-md);
  line-height: 1.55;
}

.bench-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }

/* Codificação monocromática: preenchimento (SVG), amostra (legenda) e a
   barra do índice. Uma classe por estado, porque o HTML não traz cor. */
.bench-fill--stealth { fill: var(--fs-acc); }
.bench-fill--ref { fill: none; stroke: var(--fs-ink); stroke-width: 1.5; }
.bench-fill--muted { fill: var(--fs-series-muted); }

/* Hero: kicker, título, resumo serif itálico, trilha de metadados de 200px
   e navegação em página — a coluna esquerda carrega as estatísticas. */

.bench-hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--fs-line);
  display: grid;
  grid-template-columns: minmax(min(100%, 200px), 200px) minmax(0, 1fr);
  gap: 24px 40px;
}

.bench-hero__kicker {
  margin: 0 0 1rem;
  grid-column: 2;
  color: var(--fs-muted);
  font-size: var(--fs-text-xs);
}

.bench-hero__title {
  grid-column: 2;
  max-width: 900px;
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.4vw, var(--fs-text-4xl));
  letter-spacing: -.04em;
  line-height: 1.06;
  font-weight: 600;
  text-wrap: balance;
}

.bench-hero__summary {
  grid-column: 2;
  max-width: 860px;
  margin: 0 0 1.75rem;
  color: var(--fs-muted);
  font-family: var(--fs-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Trilha de metadados: dt em acento (texto pequeno usa a variante segura
   de contraste), valor em tinta. */
.bench-stats {
  margin: 0;
  grid-column: 1;
  grid-row: 1 / 5;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-size: var(--fs-text-xs);
  color: var(--fs-muted);
}

.bench-stats__item dt {
  color: var(--fs-acc-text);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bench-stats__item dd { margin: 0; color: var(--fs-ink); }

/* Navegação em página (§0–§4): alvo no piso de 44px com padding, sem
   inflar o desenho — a margem negativa devolve o vão do mockup. */
.bench-nav {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  font-size: var(--fs-text-xs);
  color: var(--fs-muted);
}

.bench-nav a {
  display: inline-block;
  padding: .85rem 0;
  margin: -.35rem 0;
  color: inherit;
}

/* Hover de texto pequeno (12px) usa a variante texto-segura: no claro o
   --fs-acc puro mede 4,0:1 sobre o papel, abaixo dos 4,5:1 do AA;
   --fs-acc-text mede 5,05:1 (no escuro as duas se coincidem, 11,84:1). */
.bench-nav a:hover { color: var(--fs-acc-text); }

/* Seções empilhadas e ancoradas, cada uma com a coluna de 200px do §N. */

.bench-section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--fs-line);
}

.bench-notes-section { border-bottom: 0; }

.bench-section__head {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: minmax(min(100%, 200px), 200px) minmax(0, 1fr);
  gap: 24px 40px;
}

.bench-section__no {
  display: block;
  margin-bottom: .75rem;
  color: var(--fs-acc);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.bench-section__line {
  display: block;
  color: var(--fs-muted);
  font-size: var(--fs-text-xs);
}

.bench-section__line--strong { color: var(--fs-ink); }

.bench-section__head h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.5rem, 3vw, var(--fs-text-2xl));
  letter-spacing: -.03em;
  line-height: 1.1;
  font-weight: 600;
}

.bench-section__desc {
  max-width: 860px;
  margin: 0;
  color: var(--fs-muted);
  font-size: .8125rem;
  text-wrap: pretty;
}

/* §3 e §4: o título da seção mora na coluna do §N (como no mockup). */
.bench-section__aside h2 { margin: 0; }

.bench-notice {
  margin: 0 0 1.5rem;
  padding: .85rem 1.1rem;
  color: var(--fs-ink);
  background: var(--fs-bench-notice-bg);
  border: 1px solid var(--fs-bench-notice-line);
  font-size: var(--fs-text-sm);
}

.bench-pending {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--fs-bench-pending);
  border-left: 4px solid var(--fs-acc);
}

/* Cards de destaque: células separadas por linhas, como no mockup. */

.bench-cards {
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--fs-line);
  border: 1px solid var(--fs-line);
  list-style: none;
}

.bench-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.25rem;
  background: var(--fs-bg);
}

.bench-card__metric {
  color: var(--fs-acc-text);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bench-card__value {
  margin: .35rem 0 .1rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bench-card__who { font-size: var(--fs-text-xs); color: var(--fs-muted); }
.bench-card--pending .bench-card__value,
.bench-card--pending .bench-card__who { color: var(--fs-muted); }

/* Figuras: barras e dispersão lado a lado, sem moldura. */

.bench-grid {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 3rem 2.5rem;
}

.bench-figure {
  min-width: 0;
  margin: 0;
}

/* Rede de segurança: nome de ponto nunca abre rolagem horizontal na página. */
.bench-figure--scatter { overflow: hidden; }

.bench-figure__head {
  margin-bottom: .25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
}

.bench-figure__title { font-weight: 600; }

.bench-figure__hint,
.bench-figure__desc {
  color: var(--fs-muted);
  font-size: var(--fs-text-xs);
  letter-spacing: .14em;
}

.bench-figure__desc { margin: .4rem 0 1rem; line-height: 1.45; letter-spacing: 0; }

.bench-bars,
.bench-scatter {
  display: block;
  margin-top: .5rem;
  overflow: visible;
}

.bench-bar__label,
.bench-bar__value,
.bench-point__label {
  fill: var(--fs-ink);
  font-size: 12px;
  font-weight: 500;
}

.bench-bar__value { font-variant-numeric: tabular-nums; }
.bench-bar__ref { fill: var(--fs-muted); font-weight: 400; }

.bench-bar__value--pending {
  fill: var(--fs-muted);
  font-style: italic;
}

.bench-bar__pending {
  fill: var(--fs-bench-pending);
  stroke: var(--fs-line);
  stroke-dasharray: 4 3;
}

.bench-bars__zero { stroke: var(--fs-muted); }

.bench-axis__grid { stroke: var(--fs-bench-grid); }

.bench-axis__tick,
.bench-axis__title {
  fill: var(--fs-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.bench-axis__title { font-weight: 500; }
.bench-point__mark { stroke: var(--fs-surface); stroke-width: 1.5; }
.bench-point__leader { stroke: var(--fs-muted); }

/* O contorno da cor de fundo separa o nome da grade atrás dele. */
.bench-point__label {
  paint-order: stroke;
  stroke: var(--fs-surface);
  stroke-linejoin: round;
  stroke-width: 4px;
}

/* §0 Índice: barras verticais com o índice em cima, nomes embaixo. */

.bench-index__desc {
  max-width: 860px;
  margin: 0;
  color: var(--fs-muted);
  font-size: .8125rem;
  text-wrap: pretty;
}

.bench-index__chart {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 24px;
  align-items: end;
  border-bottom: 1px solid var(--fs-ink);
}

.bench-index__bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.bench-index__score {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.bench-index__score--muted { color: var(--fs-muted); }

/* Âmbar para modelo stealth; contorno para referência paga; hachura para a
   prova pendente (a média daquele modelo fica parcial). */
.bench-index__fill--stealth { background: var(--fs-acc); }
.bench-index__fill--ref { background: transparent; outline: 1px solid var(--fs-ink); outline-offset: -1px; }
.bench-index__fill--partial { background: repeating-linear-gradient(135deg, var(--fs-acc) 0 3px, transparent 3px 7px); }

.bench-index__names {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 24px;
  padding-top: .75rem;
  font-size: var(--fs-text-xs);
}

.bench-index__model { display: block; font-weight: 500; color: var(--fs-ink); }
.bench-index__model .bench-table__ref { display: inline; }
.bench-index__sub { display: block; color: var(--fs-muted); }

.bench-index__legend {
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  font-size: var(--fs-text-xs);
  color: var(--fs-muted);
}

.bench-index__legend li { display: flex; align-items: center; gap: .5rem; }

.bench-index__key {
  width: 14px;
  height: 10px;
  flex: none;
}

.bench-index__key--stealth { background: var(--fs-acc); }
.bench-index__key--partial { background: repeating-linear-gradient(135deg, var(--fs-acc) 0 2px, transparent 2px 5px); }
.bench-index__key--ref { outline: 1px solid var(--fs-ink); outline-offset: -1px; }

/* Tabelas na anatomia do mockup: cabeçalho separado por linha de tinta,
   linhas separadas por linha fina, números à direita. A régua horizontal
   fica por conta do embrulho — o documento nunca pega rolagem. */

.bench-table-wrap {
  max-width: 100%;
  margin: 3.5rem 0 0;
  overflow-x: auto;
}

.bench-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
}

.bench-table caption {
  padding: 0 0 .6rem;
  color: var(--fs-muted);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}

.bench-table th,
.bench-table td {
  padding: .55rem .75rem .55rem 0;
  border-bottom: 1px solid var(--fs-line);
  text-align: right;
  white-space: nowrap;
}

.bench-table th:first-child,
.bench-table td:first-child,
.bench-table .bench-table__text { text-align: left; }

.bench-table thead th {
  padding-bottom: .5rem;
  color: var(--fs-muted);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--fs-ink);
  vertical-align: bottom;
}

.bench-table tbody th { font-weight: 500; color: var(--fs-ink); }
.bench-table tbody tr:hover { background: var(--fs-bench-row-hover); }
.bench-table__row--muted { color: var(--fs-muted); }
.bench-table__muted { color: var(--fs-muted); }
.bench-table__ref { color: var(--fs-muted); }
.bench-index__cell { font-weight: 600; }

.bench-table__note {
  display: block;
  color: var(--fs-muted);
  font-size: .6875rem;
  font-weight: 400;
}

.bench-table__note--failed { color: var(--fs-bench-bad); font-weight: 700; }

/* Rodapé da seção: incerteza e notas. */

.bench-section__foot {
  max-width: 68ch;
  margin-top: 2.5rem;
  color: var(--fs-muted);
  font-size: .8125rem;
}

.bench-uncertainty { margin: 0 0 .75rem; }
.bench-notes { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }

/* §3 Metodologia: conteúdo da página em serifa, como no mockup. */

.bench-methodology__content {
  max-width: 68ch;
  font-family: var(--fs-font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--fs-body);
}

.bench-methodology__content p { margin: 0 0 1.2em; text-wrap: pretty; }

.bench-methodology__content h3 {
  margin: 2em 0 .6em;
  font-family: var(--fs-font-mono);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fs-ink);
}

.bench-methodology__content code {
  font-family: var(--fs-font-mono);
  font-size: .82em;
  background: var(--fs-code);
  padding: .1em .35em;
}

.bench-methodology__content ul {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: .6em;
}

/* §4 Notas: lista numerada em coluna própria. */

.bench-notes-section .bench-footnotes__list {
  max-width: 68ch;
  margin: 0;
  padding-left: 1.6rem;
  color: var(--fs-muted);
  font-size: .8125rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.bench-notes-section .bench-footnotes__list a { color: var(--fs-acc-text); font-weight: 700; }

/* Assinatura, como no fim do mockup. */

.bench-signup {
  padding: 2rem 0;
  border-top: 1px solid var(--fs-ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2rem;
  align-items: end;
}

.bench-signup__head .eyebrow { margin: 0 0 .4rem; }

.bench-signup__lead {
  margin: 0;
  font-family: var(--fs-font-serif);
  font-size: 1.125rem;
}

/* Embutido num post (shortcode): o corpo do post é serifado e maior. */

.bench--embed { margin: 2rem 0; }
.bench--embed .bench-grid { grid-template-columns: 1fr; }
.bench--embed .bench-cards,
.bench--embed .bench-table-wrap { margin-top: 1rem; }

.bench-embed__source {
  margin: 1rem 0 0;
  color: var(--fs-muted);
  font-size: var(--fs-text-sm);
}

@media (max-width: 640px) {
  /* Sem largura para as duas colunas: a trilha de metadados e o §N empilham
     acima do conteúdo, na ordem do documento. */
  .bench-hero,
  .bench-section__head {
    grid-template-columns: 1fr;
  }

  .bench-stats { grid-column: 1; grid-row: auto; }
  .bench-hero__kicker,
  .bench-hero__title,
  .bench-hero__summary,
  .bench-nav { grid-column: 1; }

  .bench-figure { padding: 0; }

  /* Sem largura para o nome ao lado do ponto: cor, forma e a tabela da
     seção ficam com a leitura. */
  .bench-point__label,
  .bench-point__leader { display: none; }
}

@media (forced-colors: active) {
  .bench-bar__rect,
  .bench-point__mark { fill: CanvasText; }
}