/* Saúde em Evidência — identidade inspirada no Aloha (Apple-like, Inter).
   Fase 1: estático, sem build. Tokens em variáveis CSS; dark/light por [data-theme]. */

/* Fonte Inter self-hospedada (variável, pesos 100–900), latin + latin-ext p/ acentos do PT.
   Substitui o Google Fonts — app 100% autocontido, sem requisição externa. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('vendor/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('vendor/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  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;
}

:root {
  --bg: #FFFFFF;
  --surface: #F5F5F7;
  --surface-2: #ECECEF;
  --border: #E0E0E0;
  --text: #1D1D1F;
  --text-2: #66666B;
  --accent: #0068D1;
  /* --brand (teal/petróleo) = IDENTIDADE/MARCA (números dos passos, realce do tripé, logo);
     distinto de --accent (azul) = INTERAÇÃO (CTAs/links/foco). Ver design system §2. */
  --brand: #0B7285;
  --success: #34C759;
  --danger: #FF3B30;
  --warning: #FF9F0A;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --maxw: 980px;
}
[data-theme="dark"] {
  --bg: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --border: #2C2C2E;
  --text: #F5F5F7;
  --text-2: #98989D;
  --accent: #1188FF;
  --brand: #3BC7D6;
  --success: #30D158;
  --danger: #FF453A;
  --warning: #FFD60A;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Acessibilidade: anel de foco visível só na navegação por teclado */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* tooltips ".info-pop" (absolutos) podem passar da borda perto da direita; clip evita
   scroll horizontal no mobile sem criar scroll container (não quebra o sticky). */
body { overflow-x: clip; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "rlig" 1, "calt" 1;
  transition: background .2s, color .2s;
}
/* Refinamentos herdados do Aloha (toque Apple) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-2) 50%, transparent); }
::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Topo */
/* Header em pílula flutuante: a barra "descola" do topo/laterais e flutua sobre o conteúdo.
   Tokens/blur próprios (não cores de referência externa). O blur/fundo migram para a .wrap. */
header.top {
  position: sticky; top: 0; z-index: 10;
  padding: 12px 16px 0;
}
.top .wrap {
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.brand {
  font-family: inherit; font-weight: 700; letter-spacing: -.02em; font-size: 18px; color: var(--text);
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  border: 0; background: none; padding: 0; cursor: pointer; transition: opacity .2s;
  /* alvo de toque de 24px (WCAG 2.2 SC 2.5.8): a caixa do texto dava 19–21px conforme o
     viewport. Poderia invocar a exceção de "texto em linha", mas dar a altura custa menos
     que sustentar a exceção — e `inline-flex` a garante sem mover a linha de base. */
  display: inline-flex; align-items: center; min-height: 24px;
}
.brand:hover { opacity: .7; }
.brand small { color: var(--text-2); font-weight: 500; }
.spacer { flex: 1; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 16px;
  transition: all .2s;
}
.icon-btn:hover { background: var(--surface-2); }
/* Ícone SVG dentro do botão circular (08/08/2026, o "Sair"). O glifo de texto do toggle de
   tema já centraliza sozinho pela regra de botão; um svg é elemento inline e assenta na
   linha de base, ficando alguns pixels baixo. O escopo por :has evita mexer no toggle, que
   já está correto — regra nova não deve corrigir o que não estava quebrado. */
.icon-btn:has(svg) { display: inline-grid; place-items: center; }
.icon-btn svg { width: 17px; height: 17px; }
/* botão de texto discreto (Contato no cabeçalho; "fale com a gente" nos erros) */
.link-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.link-btn:hover { background: var(--surface-2); color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* Chave de idioma PT/EN (ao lado do tema) — preferência/setting, não CTA: segmented control
   NEUTRO monocromático (trilha recuada + segmento ativo elevado), espelhando o toggle de tema.
   Exceção deliberada à §2 (não usa accent); ver design system §12. */
.lang-switch {
  display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px; background: var(--surface-2); height: 32px; padding: 3px; gap: 2px;
}
.lang-opt {
  border: 0; background: none; color: var(--text-2); font-family: inherit; font-size: 12px;
  font-weight: 700; padding: 0 10px; cursor: pointer; border-radius: 999px;
  transition: background .2s, color .2s; letter-spacing: .02em;
}
.lang-opt:hover { color: var(--text); }
.lang-opt[aria-pressed="true"] {
  background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
/* Marca de fallback: conteúdo clínico/curso exibido em PT (só aparece em inglês) */
.lang-fallback {
  display: none; margin: 0 0 18px; padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-2);
  background: color-mix(in srgb, var(--text-2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
html[lang="en"] .lang-fallback { display: block; }
html[lang="en"] #view-analise.empty-mode .lang-fallback { display: none; }
/* Fase 2: quando o conteúdo exibido já está 100% em EN, a marca de fallback some (por-registro) */
html[lang="en"] .lang-fallback.is-complete { display: none; }
/* linha "algum problema?" dentro de estados de erro */
.contato-line { margin-top: 14px; font-size: 13px; color: var(--text-2); }
.contato-line .link-inline {
  background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* Modal de contato/suporte */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px);
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative; width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 26px 24px 24px;
}
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; transition: all .2s;
}
.modal-x:hover { background: var(--surface-2); color: var(--text); }
.modal-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.modal-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-form[hidden] { display: none; }   /* o display:flex sobrepõe o atributo hidden */
.modal-form .ff { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.modal-form input, .modal-form textarea {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; outline: none; resize: vertical;
}
.modal-form input:focus, .modal-form textarea:focus { border-color: var(--accent); }
/* Caixa de marcar ("tenho o PDF"): linha horizontal, ao contrário do .ff em coluna */
.modal-form .ff-check {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer;
}
.modal-form .ff-check input { width: auto; accent-color: var(--accent); cursor: pointer; }
/* Letra miúda (finalidade do e-mail / LGPD) */
.modal-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-2); opacity: .85; }
/* I12 — o aviso de que não há rascunho salvo não é letra miúda de rodapé: quem o lê tarde
   já perdeu o texto. Mesma família da .modal-fine, mas sem o esmaecimento. */
.modal-fine.no-autosave { opacity: 1; }
.modal-form .btn-primary { margin-top: 4px; width: 100%; }
.modal-ok { text-align: center; padding: 16px 6px; }
.modal-ok .mok-ic { width: 40px; height: 40px; color: var(--success); margin-bottom: 10px; }
.modal-ok .mok-tx { font-size: 14px; color: var(--text); line-height: 1.55; }

/* Barra de navegação do modo: "← Início" (volta à home) + ação contextual (Nova análise) */
.mode-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 16px;
}
.back-home, .nav-action {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; transition: background .2s, border-color .2s, color .2s;
}
.back-home:hover, .nav-action:hover {
  color: var(--text); border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--text-2) 6%, var(--surface));
}
.nav-action { margin-left: auto; }   /* empurra "Nova análise" para a direita */

/* ===== Tela de entrada (dashboard): 1 produto em destaque + 2 bônus ===== */
/* ★★★ 12/08/2026 — ESTA ANIMAÇÃO NÃO PODE PARTIR DE `opacity: 0`, e o motivo é medido.
   `animation-fill-mode: both` aplica o estado `from` ANTES de a animação começar. Como o
   #view-home carrega o `h1.lp-title` e o `p.lp-sub` — que são o elemento LCP no desktop e no
   mobile, respectivamente (medido com PerformanceObserver, não inferido) —, a tela nascia
   com opacidade zero e NENHUM pixel de conteúdo pintava até a animação correr. Isso atrasava
   FCP e LCP JUNTOS, em toda visita, e o LCP pesa 25% da nota de performance.
   O fade saiu; sobrou o deslize, que não esconde pixel nenhum: o texto pinta na primeira
   frame, 6px abaixo do lugar final. `transform` não participa do layout, então o CLS
   continua zero. Auditoria: docs/auditorias/2026-08-12-lighthouse-app.md §1.
   ⚠ Quem reintroduzir `opacity` aqui — ou mover para cá qualquer contêiner acima da dobra —
   refaz o defeito, e ele NÃO aparece na conferência de tela: o olho não distingue 350 ms. */
#view-home { max-width: 920px; margin: 0 auto; padding: 16px 0 8px; animation: home-in .35s ease both; }
@keyframes home-in { from { transform: translateY(6px); } to { transform: none; } }
/* Quem pede menos movimento não recebe movimento nenhum. O conteúdo já é legível sem ele —
   é o mesmo cuidado que o arquivo já tinha para a seta da dobra do painel (`.pnl-dobra-seta`). */
@media (prefers-reduced-motion: reduce) { #view-home { animation: none; } }
.home-hero { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; text-align: center; margin: 28px 0 8px; }
.home-sub { text-align: center; color: var(--text-2); font-size: 15.5px; margin: 0 auto 30px; max-width: 520px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-card {
  position: relative; display: flex; gap: 16px; align-items: flex-start; text-align: left;
  font-family: inherit; cursor: pointer; width: 100%;
  padding: 22px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.home-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
/* o produto ocupa a linha inteira e ganha acento */
.home-card.primary {
  grid-column: 1 / -1; padding: 26px 28px; gap: 20px; align-items: center;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.home-ic { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; color: var(--text-2);
  background: color-mix(in srgb, var(--text-2) 8%, transparent); }
.home-ic svg { width: 28px; height: 28px; }
.home-card.primary .home-ic { width: 60px; height: 60px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.home-card.primary .home-ic svg { width: 32px; height: 32px; }
.home-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-card-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.home-card.primary .home-card-title { font-size: 20px; }
.home-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.home-card.primary .home-card-desc { font-size: 14.5px; max-width: 60ch; }
.home-cta { margin-top: 8px; align-self: flex-start; font-size: 14px; font-weight: 800; color: #fff;
  background: var(--accent); border-radius: 999px; padding: 9px 18px; transition: filter .2s; }
.home-card.primary:hover .home-cta { filter: brightness(1.07); }
.home-badge { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
  background: color-mix(in srgb, var(--text-2) 10%, transparent); border-radius: 999px; padding: 3px 10px; }
/* selo de preço do produto (config-friendly: troque o texto quando o preço for definido) */
.home-price { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 4px 11px; }

/* ===== Landing comercial (home) — "evidência sem torcida" =====
   Calor via tipografia/espaço/composição; azul só em ação/marca (design system §2). */

/* Hero */
.lp-hero { text-align: center; max-width: 720px; margin: 8px auto 34px; }
.lp-kicker {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-2); margin-bottom: 16px;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--text-2) 6%, transparent);
}
.lp-title {
  font-size: clamp(30px, 5.2vw, 46px); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.08; margin: 0 auto 16px; max-width: 16ch; color: var(--text);
}
.lp-sub { font-size: clamp(15.5px, 2vw, 18px); line-height: 1.55; color: var(--text-2); margin: 0 auto; max-width: 56ch; }
.lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.lp-cta-row .btn-primary { padding: 12px 26px; font-size: 15px; }
/* botão secundário (ghost) — ação, mas sem preencher: contorno neutro */
.btn-ghost {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); background: var(--surface);
  color: var(--text); border-radius: 999px; padding: 12px 26px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

/* Carros-chefe: dois cards-produto co-destacados */
.flagship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.home-card.flagship {
  flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.home-card.flagship .home-ic {
  width: 58px; height: 58px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.home-card.flagship .home-ic svg { width: 30px; height: 30px; }
.home-card.flagship .home-card-title { font-size: 19px; }
.home-card.flagship .home-cta {
  margin-top: 6px; color: var(--accent); background: none; padding: 0; font-weight: 700; font-size: 14.5px;
}
.home-card.flagship:hover .home-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Bônus (Aprender): faixa slim de largura cheia */
.home-card.bonus-row { align-items: center; gap: 18px; padding: 18px 22px; }
.home-card.bonus-row .home-card-title { font-size: 16px; }

/* Seções de conteúdo da landing */
.lp-section { margin: 44px 0; }
.lp-h2 { font-size: clamp(21px, 3vw, 27px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; color: var(--text); }
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.value-card {
  padding: 22px 22px 20px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.value-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; color: var(--text); }
.value-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
.value-foot {
  margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2);
  padding-top: 16px; border-top: 1px solid var(--border);
}
.value-foot strong { color: var(--text); font-weight: 700; }

/* Tripé da PBE (secundário): visual conceitual + copy */
.tripe {
  display: grid; grid-template-columns: 168px 1fr; gap: 30px; align-items: center;
  padding: 30px 28px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.tripe-visual { display: grid; place-items: center; color: var(--text-2); }
.tripe-visual svg { width: 148px; height: auto; }
.tripe-copy .lp-h2 { margin-bottom: 12px; }
.tripe-lead { font-size: 14.5px; color: var(--text-2); margin: 0 0 10px; }
.tripe-vertices { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tripe-vertices li {
  font-size: 14px; line-height: 1.5; color: var(--text-2); position: relative; padding-left: 20px;
}
.tripe-vertices li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--text-2);
}
.tripe-vertices li.on::before { background: var(--brand); border-color: var(--brand); }
.tripe-vertices li strong { color: var(--text); font-weight: 700; }
.tripe-here { color: var(--brand); font-weight: 700; }
.tripe-note { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
.tripe-note strong { color: var(--text); font-weight: 700; }

/* Como funciona — 3 passos numerados (calor por tipografia/espaço, sem escala de julgamento §11) */
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.how-step {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 16px 18px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.how-num {
  font-size: 15px; font-weight: 700; color: var(--brand); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1.5; min-width: 22px;
}
.how-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.how-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.how-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* Quem faz — autoria e processo. Grade de 2 colunas, filete em --brand (identidade, §2):
   é declaração de quem somos, não elemento de interação. */
.lp-lead { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 18px; max-width: 62ch; }
.auth-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.auth-item {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 14px 16px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--brand) 55%, transparent);
}
.auth-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.auth-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 700px) { .auth-points { grid-template-columns: 1fr; } }

/* Faixa de confiança: 4 pilares rotulados → página "Como funciona" */
.trust-strip {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
  text-align: left; font-family: inherit; cursor: pointer; margin: 40px 0 8px;
  padding: 20px 24px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.trust-strip:hover {
  transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.trust-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.trust-strip-head .sec-tag { margin: 0; }
.trust-cta { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.trust-pillars { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.trust-pillar {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 5px 12px; border-radius: 999px; background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* Página "Como funciona" */
.cf-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 8px; }
.cf-block {
  padding: 24px 24px 22px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.cf-block .sec-tag { margin-bottom: 12px; }
.cf-h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; color: var(--text); }
.cf-block p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; }
.cf-block p strong { color: var(--text); font-weight: 700; }
.cf-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 30px 0 8px; }

/* ===== PLANOS — a matriz de recursos (07/08/2026) =====
   Primeira <table> do produto, então as convenções nascem aqui.
   ⚠ A tabela rola DENTRO do próprio contêiner: a coluna de recurso carrega frase inteira e
   a 384px três colunas não cabem sem fundir. A S11 mediu o oposto no líder — a tabela do
   Navigator deles FUNDE colunas a 384px, e o que se perde é justamente a associação entre
   recurso e plano, que é a única informação da tela. Rolagem horizontal contida é feia e
   honesta; fundir é bonito e mente. */
/* Eixo mensal × anual (09/08/2026). `auto-fit` com `minmax` em vez de duas colunas fixas:
   com 2 cartões a diferença só aparece no estreito, e é lá que ela importa — em 360 px duas
   colunas fixas espremem o preço até quebrar a linha no meio do valor. Não há cartão
   "destacado": marcar o anual como recomendado seria empurrar plano numa página cuja régua
   (§8) é o oposto disso. */
.planos-eixo { margin: 6px 0 18px; }
.planos-cards {
  display: grid; gap: 12px; margin: 12px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.plano-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; background: var(--surface);
}
.plano-nome { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
/* O tamanho foi calibrado quando o preço era a palavra "a definir"; com o número da D11 na
   tela (09/08) foi conferido no navegador, inclusive em 360 px, que é onde os dois cartões
   viram uma coluna só. */
.plano-preco { margin: 4px 0 10px; font-size: 20px; font-weight: 700; color: var(--text); }
/* O mensal equivalente é subtítulo do preço, não item da lista: sobe junto do número que ele
   traduz. Sobe mesmo — a margem negativa o encosta no total, senão os 10px do preço abrem um
   vão que o desgruda e ele passa a parecer a primeira linha da lista. Só o cartão anual tem
   esta linha, então ele fica mais alto que o mensal; é diferença de conteúdo, não desalinho. */
.plano-preco-eq { margin: -8px 0 10px; font-size: 13px; color: var(--text-2); }
.plano-itens { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.home-planos-link { margin: 14px 0 0; text-align: center; }

.planos-scroll { overflow-x: auto; margin: 4px 0 14px; }
.planos-tab { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
/* `caption` é a única alternativa textual da tabela inteira para quem navega por leitor de
   tela — visível de propósito: ela também orienta quem enxerga. */
.planos-tab caption {
  text-align: left; color: var(--text-2); font-size: 13px; line-height: 1.5;
  padding: 0 0 10px; caption-side: top;
}
.planos-tab th, .planos-tab td {
  text-align: left; padding: 11px 14px; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
/* ⚠ `--text-2` sobre `--surface-2` mede 4,30 no tema claro e REPROVA — é o par já medido
   em `.lang-opt` e `.srow-index` (06/08). Aqui o cabeçalho usa `--text`, o par mais forte
   do sistema: resolve o contraste sem token novo e ainda é a tipografia certa para
   cabeçalho de tabela. 12px em maiúsculas NÃO é texto grande, então o piso é 4,5. */
.planos-tab thead th {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text); background: var(--surface-2); white-space: nowrap;
}
.planos-tab thead th:first-child { border-top-left-radius: var(--radius-sm); }
.planos-tab thead th:last-child { border-top-right-radius: var(--radius-sm); }
.planos-tab tbody th { font-weight: 600; color: var(--text); line-height: 1.45; }
.planos-tab tbody td { color: var(--text-2); }
/* A coluna do assinante é a que se lê procurando: leve realce de superfície, SEM cor de
   estado — verde/vermelho aqui viraria juízo de valor sobre quem não paga. */
.planos-tab tbody td:last-child { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.planos-tab tbody tr:last-child th, .planos-tab tbody tr:last-child td { border-bottom: none; }
/* No estreito o custo da rolagem é a coluna do assinante ficar fora da tela — que é a que
   se procura. Aperta-se o passo (fonte e respiro) para trazer mais dela ao primeiro olhar;
   NÃO se funde coluna, que é o defeito medido na tabela deles a 384px. */
@media (max-width: 640px) {
  .planos-tab { min-width: 440px; font-size: 13px; }
  .planos-tab th, .planos-tab td { padding: 10px 10px; }
  .planos-tab thead th { font-size: 11px; }
}
.planos-nota { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 24px; max-width: 720px; }
.planos-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 8px; }
@media (max-width: 700px) { .planos-blocos { grid-template-columns: 1fr; } }

h1.hero { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 8px 0 6px; }
.sub { color: var(--text-2); font-size: 15.5px; margin: 0 0 22px; max-width: 640px; }

/* Mini-curso Aprender */
.course-hero { margin: 0 0 14px; }
.course-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text-2); box-shadow: var(--shadow);
}
.course-strip span, .course-kicker {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
}
.course-strip strong { color: var(--text); font-size: 14px; }
.course-strip small { margin-left: auto; font-size: 12.5px; }
.course-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.course-modules { display: flex; flex-direction: column; gap: 8px; }
.course-module-card {
  width: 100%; display: flex; gap: 11px; align-items: flex-start; text-align: left;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: 12px; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow); transition: background .2s, border-color .2s, transform .2s;
}
.course-module-card:hover, .course-module-card.active {
  background: color-mix(in srgb, var(--text-2) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
.course-no {
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--text-2);
  padding: 4px 8px; border-radius: 999px; background: var(--bg);
}
.course-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.course-card-text strong { font-size: 14px; line-height: 1.25; }
.course-card-text small {
  color: var(--text-2); font-size: 12.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.course-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.course-time { color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.course-panel h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; letter-spacing: 0; }
.course-panel p { margin: 0; color: var(--text); line-height: 1.55; }
.course-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.course-track button {
  min-height: 72px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); cursor: pointer; font: inherit; font-weight: 700;
  text-align: left; padding: 10px; line-height: 1.25;
}
.course-track span { display: block; color: var(--text-2); font-size: 11px; margin-bottom: 6px; }
/* Gate do mini-curso (D3, 07/08/2026) — o módulo 1 é amostra aberta; os demais, do plano.
   O trancado NÃO é apagado: fica legível, com o mesmo contraste de texto do liberado, e o
   cadeado é que carrega o estado. Esmaecer o rótulo seria esconder do visitante o que ele
   está sendo convidado a comprar — e, em contraste, quebraria o mínimo do §11 do
   DESIGN_SYSTEM. O que muda é a superfície (fundo mais fundo, borda tracejada). */
.course-module-card.locked, .course-track button.locked {
  background: var(--bg);
  border-style: dashed;
}
.course-module-card.locked { position: relative; }
.course-lock { flex: 0 0 auto; margin-left: auto; align-self: center; font-size: 13px; line-height: 1; opacity: .75; }
.course-track button.locked .course-lock { margin-left: 4px; }
.course-muro-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.course-panel.course-muro p + p { margin-top: 10px; }

.course-lesson-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.course-copy h2 { margin: 6px 0 9px; }
.course-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.course-tags span {
  padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--text-2);
  font-size: 12px; font-weight: 700;
}
.course-module-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
  gap: 16px; align-items: stretch; margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.course-intro-copy { min-width: 0; }
.course-concepts {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.course-concepts > .course-kicker { display: block; margin-bottom: 10px; }
.course-concepts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.course-concepts li { display: grid; gap: 2px; min-width: 0; }
.course-concepts li strong { font-size: 12.5px; color: var(--text); }
.course-concepts li > span { font-size: 12px; line-height: 1.4; color: var(--text-2); }
.course-apply-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.course-apply-grid.two { grid-template-columns: 1fr 1fr; align-items: stretch; }
.course-apply-grid.two > * { min-width: 0; }
.course-section-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px; margin: 0 0 16px;
}
.course-section-nav button {
  min-width: 0; min-height: 66px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  line-height: 1.25; text-align: left; padding: 9px 10px;
  transition: background .2s, border-color .2s, transform .2s;
}
.course-section-nav button:hover, .course-section-nav button.active {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--text-2) 7%, var(--surface));
}
.course-section-nav span {
  display: block; margin-bottom: 5px; color: var(--text-2);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.course-section-body { display: flex; flex-direction: column; gap: 20px; }
.course-takeaway {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border));
  font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--text);
}
.course-example-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 12px;
}
.course-mini-card {
  min-width: 0; padding: 14px 16px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.course-mini-card h3 {
  margin: 0 0 7px; color: var(--text-2); font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
}
.ic-h { display: inline-flex; align-items: center; gap: 7px; }
.ic-h svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }
.course-pitfall .ic-h svg { opacity: .95; color: var(--warning); }
.course-mini-card p { font-size: 14px; line-height: 1.55; }
.course-real-study {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.real-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--text-2); font-size: 11.5px; font-weight: 750;
}
.real-head span { text-transform: uppercase; letter-spacing: .04em; }
.real-head b {
  color: var(--text-2); font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-2) 10%, transparent);
}
.course-real-study strong { font-size: 13.5px; line-height: 1.35; }
.course-real-study small { color: var(--text-2); font-size: 12px; }
.course-real-study a {
  align-self: flex-start; color: var(--text-2); text-decoration: none;
  font-size: 12.5px; font-weight: 750; border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 9px; background: color-mix(in srgb, var(--text-2) 5%, transparent);
}
.course-real-study a:hover { color: var(--text); background: color-mix(in srgb, var(--text-2) 10%, transparent); }
.course-real-study .chart { margin-top: 8px; padding-top: 10px; }
.course-section-check { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.course-section-check ul { grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 9px; }
.course-bottom-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.course-check h3, .course-pitfall h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.course-check ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.course-check li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.course-check li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 999px; background: var(--text-2); }
.course-pitfall p {
  padding: 12px 13px; border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
}
.course-back {
  border: 1px solid var(--border); background: var(--bg); color: var(--text-2);
  border-radius: 999px; padding: 6px 11px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-back:hover { color: var(--text); background: var(--surface-2); }
/* cabeçalho compacto da microaula (voltar à visão geral + progresso) */
.course-lesson-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
/* botão primário "Começar" na visão geral */
.course-start {
  margin-top: 14px; align-self: flex-start; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 800; color: #fff; border: 0;
  background: var(--accent); border-radius: 999px; padding: 9px 18px;
  transition: filter .2s;
}
.course-start:hover { filter: brightness(1.07); }
/* lista numerada de microaulas na visão geral */
.course-micro-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.course-micro-list button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  text-align: left; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: var(--radius-sm); padding: 11px 14px;
  transition: background .2s, border-color .2s;
}
.course-micro-list button:hover {
  background: color-mix(in srgb, var(--text-2) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
.course-micro-list .cm-no { font-size: 12px; font-weight: 800; color: var(--text-2); }
.course-micro-list .cm-t { font-size: 14px; font-weight: 700; color: var(--text); min-width: 0; }
.course-micro-list .cm-time { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.course-visual {
  min-height: 200px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  padding: 16px; overflow: hidden;
}
.pyramid-viz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pyr-row { text-align: center; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 800; color: var(--text); background: color-mix(in srgb, var(--text-2) 9%, transparent); }
.pyr-row.r1 { width: 46%; } .pyr-row.r2 { width: 62%; } .pyr-row.r3 { width: 78%; } .pyr-row.r4 { width: 94%; }
.paper-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.paper-viz span { padding: 16px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); font-weight: 800; text-align: center; }
.paper-note { grid-column: 1 / -1; color: var(--text-2); text-align: center; font-size: 13px; }
.pico-viz {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; align-content: center;
}
.pico-viz span, .contract-viz span, .conclusion-viz span {
  padding: 14px 10px; border-radius: 10px; text-align: center;
  font-weight: 800; background: color-mix(in srgb, var(--text-2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.compare-viz, .risk-viz {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center;
}
.compare-viz div, .risk-viz div {
  min-width: 0; padding: 14px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
}
.compare-viz strong, .risk-viz strong { display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.compare-viz span, .risk-viz span { font-size: 13.5px; line-height: 1.35; }
.stop-viz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center; text-align: center; }
.stop-viz div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; color: var(--text-2); font-size: 12px; }
.ladder-viz { display: grid; gap: 8px; align-content: center; }
.ladder-viz div {
  padding: 9px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text-2) 8%, transparent);
  border: 1px solid var(--border); font-size: 13px; font-weight: 800; text-align: center;
}
.ladder-viz div:nth-child(1) { width: 58%; }
.ladder-viz div:nth-child(2) { width: 72%; margin-left: 8%; }
.ladder-viz div:nth-child(3) { width: 84%; margin-left: 12%; }
.ladder-viz div:nth-child(4) { width: 96%; margin-left: 4%; }
.contract-viz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.contract-viz strong {
  grid-column: 1 / -1; text-align: center; font-size: 14px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
}
.result-viz {
  display: grid; grid-template-columns: 1fr repeat(3, .8fr); gap: 6px;
  align-content: center; font-size: 12px;
}
.result-viz > * {
  margin: 0; padding: 8px 7px; border-radius: 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
}
.result-viz span { color: var(--text-2); font-weight: 800; text-align: left; }
.result-viz .wide { grid-column: span 3; }
.spin-viz {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 10px; align-items: center; text-align: center;
}
.spin-viz > div:not(.spin-arrow) {
  min-height: 90px; display: flex; align-items: center; justify-content: center;
  padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  font-weight: 800; line-height: 1.25;
}
.spin-arrow { color: var(--text-2); font-size: 22px; font-weight: 800; }
.random-viz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: center; text-align: center; }
.random-viz .pool, .random-viz .split { grid-column: 1 / -1; }
.random-viz .pool, .random-viz span {
  padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-weight: 800;
}
.random-viz .split { color: var(--text-2); font-size: 22px; font-weight: 800; }
.cohort-viz {
  display: grid; grid-template-columns: .9fr 18px .7fr 18px .9fr;
  gap: 8px; align-content: center; align-items: center; text-align: center;
}
.cohort-viz span {
  padding: 10px 8px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); font-size: 12px; font-weight: 800;
}
.cohort-viz div { height: 2px; background: var(--text-2); opacity: .45; }
.cohort-viz strong { color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.snapshot-viz {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: center; text-align: center;
}
.snapshot-viz div, .snapshot-viz small { grid-column: 1 / -1; color: var(--text-2); font-weight: 800; }
.snapshot-viz span { padding: 18px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-weight: 800; }
.synthesis-viz, .body-viz {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: center; align-items: center; text-align: center;
}
.synthesis-viz span, .body-viz span {
  padding: 11px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  font-weight: 800; font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.synthesis-viz strong { grid-column: 1 / -1; padding: 12px; border-radius: 999px; background: color-mix(in srgb, var(--success) 9%, transparent); border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border)); }
.body-viz span:last-child { grid-column: 1 / -1; background: color-mix(in srgb, var(--success) 9%, transparent); }
.bars-viz {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  align-items: end; text-align: center;
}
.bars-viz div {
  height: 150px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 8px; padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
}
.bars-viz div span { width: 68%; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--success) 45%, var(--text-2)); }
.bars-viz div b { font-size: 12px; color: var(--text-2); }
.bars-viz > strong { grid-column: 1 / -1; color: var(--text-2); font-size: 13px; }
.pvalue-viz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
}
.pvalue-viz .curve {
  width: min(230px, 80%); height: 88px; border: 3px solid var(--text-2);
  border-bottom: 0; border-radius: 130px 130px 0 0; opacity: .65;
}
.pvalue-viz span { font-weight: 800; }
.pvalue-viz small { color: var(--text-2); max-width: 260px; line-height: 1.35; }
.dropout-viz {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; text-align: center;
}
.dropout-viz div {
  min-height: 88px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-weight: 800;
}
.dropout-viz small { grid-column: 1 / -1; color: var(--text-2); font-weight: 700; }
.confound-viz {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; text-align: center;
}
.confound-viz span, .confound-viz strong {
  padding: 18px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
}
.confound-viz strong {
  grid-column: 1 / -1; background: color-mix(in srgb, var(--warning) 11%, transparent);
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}
.apply-viz {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; text-align: center;
}
.apply-viz div {
  grid-column: 1 / -1; padding: 11px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); font-weight: 800;
}
.apply-viz span { padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--text-2) 8%, transparent); font-size: 12px; font-weight: 800; }
.conclusion-viz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.design-viz { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.design-viz::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; background: var(--border); }
.design-viz span { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 800; }
.forest-viz svg { width: 100%; height: auto; display: block; }
.forest-viz .axis, .forest-viz g line { stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.forest-viz .zero { stroke: var(--border); stroke-width: 2; stroke-dasharray: 5 5; }
.forest-viz circle { fill: var(--text); }
.forest-viz text { fill: var(--text-2); font-size: 13px; }
.forest-viz .t-zero { font-weight: 700; }
.forest-viz .t-strong { font-weight: 700; fill: var(--text); }
.forest-viz .diamond { fill: var(--text); stroke: none; }
.forest-viz .guide { stroke: var(--border); stroke-width: 2; }
.forest-viz .gap circle { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-dasharray: 4 4; }
/* gráfico de dados em largura cheia (abaixo do texto), com legenda "como ler" */
.course-chart { margin: 4px 0 0; max-width: 660px; }
.course-chart .course-visual { min-height: 0; }
.course-chart figcaption {
  margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.bias-viz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center; text-align: center; }
.bias-dot { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 10px; display: block; }
.bias-dot.ok { background: color-mix(in srgb, var(--success) 70%, var(--surface)); }
.bias-dot.warn { background: color-mix(in srgb, var(--warning) 70%, var(--surface)); }
.bias-dot.bad { background: color-mix(in srgb, var(--danger) 64%, var(--surface)); }
.bias-viz div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; color: var(--text-2); font-size: 12px; }
.grade-viz { display: grid; gap: 10px; align-content: center; }
.grade-viz div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text-2) 7%, transparent); }
.grade-viz span { font-weight: 900; color: var(--text); letter-spacing: .08em; }
.grade-viz small { color: var(--text-2); font-weight: 700; }

/* Busca */
.search {
  display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 8px 8px 16px; box-shadow: var(--shadow);
}
.search input {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font-size: 16px; outline: none; font-family: inherit;
}
.search button {
  border: 0; background: var(--accent); color: #fff; border-radius: var(--radius-sm);
  padding: 10px 18px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.hint { color: var(--text-2); font-size: 13px; margin: 8px 2px 0; }

/* Botão de upload de PDF (mesmo padrão de pílula accent do app) */
.btn-upload {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent);
  border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .2s, border-color .2s; font-family: inherit;
}
.btn-upload:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.btn-upload svg { width: 16px; height: 16px; }

/* Entrada upload-primeiro (estado vazio)
   ⚠ 14/08/2026: deixou de ser `<label>` e virou `<button>` (o `for` nativo abria o explorador
   de arquivos sem passar por JS — ver o comentário no index.html). Daí o `font: inherit` e o
   `appearance: none`: sem eles o botão herda a tipografia do agente do usuário e os dois
   `<span>` de dentro deixam de casar com o resto da tela. */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 100%; max-width: 540px; padding: 34px 24px; cursor: pointer; text-align: center;
  background: var(--surface); border: 1.5px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius); transition: border-color .2s, background .2s; box-shadow: var(--shadow);
  font: inherit; color: inherit; appearance: none; -webkit-appearance: none;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.dz-ic { width: 34px; height: 34px; color: var(--accent); margin-bottom: 2px; }
.dz-title { font-size: 15.5px; font-weight: 600; color: var(--text); }
.dz-sub { font-size: 12.5px; color: var(--text-2); max-width: 400px; line-height: 1.5; }
.dz-hint { margin-top: 4px; font-size: 12px; color: var(--text-2); opacity: .78; font-variant-numeric: tabular-nums; }

.or-div { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 540px; margin: 20px 0; color: var(--text-2); font-size: 13px; }
.or-div::before, .or-div::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.doi-row { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 8px; }
.doi-q { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.doi-row .search { width: 100%; }
.entry-note { margin: 22px auto 0; max-width: 460px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
/* I10 — aviso PRÉ-erro: fica sob o campo de busca, onde a confusão nasceria, e não depois
   dela na tela de "não achei". Tom de nota, não de alerta: nada deu errado ainda. */
.pre-aviso {
  width: 100%; max-width: 540px; margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.pre-aviso strong { color: var(--text); font-weight: 600; }

/* faixa "identificado pelo PDF" (resultado de upload que bateu na base) */
.pdf-banner {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 13px;
  font-size: 13px; color: var(--text); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.pdf-banner svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }

/* Estado VAZIO da aba Análise: entrada centralizada, página limpa (não vazia demais) */
#view-analise.empty-mode { min-height: 54vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#view-analise.empty-mode .hero { margin: 0 0 8px; }
#view-analise.empty-mode .sub { margin: 0 auto 22px; }
#view-analise.empty-mode .count, #view-analise.empty-mode .results { display: none; }
/* fora do estado vazio, some a entrada grande; fica só a busca compacta no topo */
#view-analise:not(.empty-mode) .dropzone,
#view-analise:not(.empty-mode) .or-div,
#view-analise:not(.empty-mode) .entry-note,
#view-analise:not(.empty-mode) .doi-q,
#view-analise:not(.empty-mode) .hero,
#view-analise:not(.empty-mode) .sub,
#view-analise:not(.empty-mode) .doi-row { display: none; }

/* Rodapé discreto */
.site-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  max-width: 920px; margin: 28px auto 0; padding: 16px 24px 24px;
  border-top: 1px solid var(--border); color: var(--text-2); font-size: 12.5px;
}
.site-foot .foot-tag { letter-spacing: -.01em; }

/* Nota do fallback de idioma: a busca não achou no índice da tela e respondeu com o outro.
   Discreta de propósito — é procedência do resultado, não alerta. */
.busca-idioma {
  max-width: 920px; margin: -2px auto 10px; color: var(--text-2);
  font-size: 12.5px; line-height: 1.5;
}
.busca-idioma[hidden] { display: none; }

/* Bloco "não está na base" (resultado de busca sem match) */
.notfound {
  text-align: center; padding: 36px 22px; background: var(--surface);
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.nf-ic { width: 40px; height: 40px; color: var(--text-2); opacity: .7; margin-bottom: 12px; }
.notfound .nf-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.notfound .nf-sub { color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 480px; margin: 0 auto 18px; }
.notfound .nf-sub b { color: var(--text); font-weight: 600; }
/* aviso honesto pós-upload (sem fingir parecer) */
.upload-status {
  text-align: center; padding: 28px 22px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius);
}
.upload-status .us-file { font-weight: 600; color: var(--text); margin: 8px 0 4px; }
.upload-status .us-note { color: var(--text-2); font-size: 13.5px; line-height: 1.55; max-width: 500px; margin: 0 auto; }
.us-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* Seletor de artigo (PDF com mais de um DOI) */
.doi-picks { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 14px auto 0; text-align: left; }
.doi-pick {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; cursor: pointer; font-family: inherit;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .2s, background .2s;
}
.doi-pick:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.dp-title { font-size: 14px; font-weight: 600; color: var(--text); }
.dp-doi { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.btn-primary {
  border: 0; background: var(--accent); color: #fff; border-radius: 999px;
  padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter .2s;
}
.btn-primary:hover { filter: brightness(1.07); }

/* Resumo da base (linha compacta; legado, oculto na consulta curada) */
.kpis { margin: 12px 2px 2px; font-size: 13px; color: var(--text-2); }
.kpis strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* PAINEL DO PROJETO (bastidor, 31/07/2026) — grade temática 1fr/1fr do §8. Nada de token
   novo: cards do §5, faixa de nível do §5 nos mini-cards, kicker do §4, escala do §3 só
   onde há julgamento. O que aperta vem PRIMEIRO na página, porque a fraqueza conhecida
   desta grade é diluir o alerta entre cards de igual peso. */
/* ★ RESPIRO DA PÁGINA (item 3 do brief, 31/07). O card de selos nascia colado no de cima,
   e a causa não era ele: era não haver ritmo vertical nenhum. Cada bloco trazia (ou não) a
   própria margem — `.painel-grid` tinha `margin-top: 20px`, os cards soltos tinham zero.
   Com quatro blocos novos o defeito ia se multiplicar, então a correção é de SISTEMA e não
   do card que reclamou: o contêiner governa o intervalo, uma vez, para todos. */
#painel-results { display: flex; flex-direction: column; gap: 22px; }
.painel-meta { margin: 2px 2px -6px; font-size: 12.5px; color: var(--text-2); }
.painel-meta code { font-size: 11.5px; }
.painel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pnl-card { padding: 18px 20px; }
.pnl-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.pnl-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.pnl-row:first-child { border-top: 0; }
.pnl-k { font-size: 13.5px; color: var(--text-2); }
/* tabular-nums: sem isso os números dançam de linha para linha e a coluna deixa de ler. */
.pnl-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A faixa de 4px do §5 no CARD inteiro — é ela que faz o card sinalizar sozinho. */
.pnl-card.nivel-ok, .pnl-card.nivel-atencao, .pnl-card.nivel-baixo, .pnl-card.nivel-alerta {
  border-left-width: 4px; border-left-style: solid;
}
.pnl-card.nivel-ok { border-left-color: var(--ok); }
.pnl-card.nivel-atencao { border-left-color: var(--atencao); }
.pnl-card.nivel-baixo { border-left-color: var(--baixo); }
.pnl-card.nivel-alerta { border-left-color: var(--alerta); }
.pnl-atencao { padding: 18px 20px; }
.pnl-atencao .aval-grid { margin-top: 12px; }

/* Legenda e nota — a explicação do item 5, sem virar parágrafo. Cinza: é informação (§2),
   nunca julgamento, e por isso fica fora da escala verde→vermelho. */
.pnl-legenda { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.pnl-nota {
  margin-top: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--text-2); background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: var(--radius-sm);
}
.pnl-nota strong { color: var(--text); }

/* Faixa de estatística do card de mitos (item 3): contadores em linha, sem virar card. */
.pnl-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.pnl-stat strong { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 4px; }
.pnl-stat-sep { padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

/* ★ `.pnl-bar` — O ÚNICO primitivo visual novo do painel, e é UM para os três cards que o
   usam (mitos, macrotemas, ritmo). O §7 manda não criar segunda linguagem visual; o
   `barSvg` não servia porque codifica um valor contra o máximo do CONJUNTO, e aqui o
   sentido é razão contra o total da PRÓPRIA linha — com barra proporcional ao máximo, o
   mito com muitos artigos pareceria mais completo que o mito com poucos, o inverso do
   fato. Preenchimento NEUTRO de propósito: cobertura não é julgamento (§6h), e 100%
   analisado não é melhor que 40% — pode só significar tema pequeno. Quem carrega a escala
   do §3 é o ponto ao lado, com a certeza do veredito. */
.pnl-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.pnl-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: center;
  gap: 12px; padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.pnl-bar:first-child { border-top: 0; }
.pnl-bar-k {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 13px; line-height: 1.4; color: var(--text);
}
.pnl-bar-track {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text-2) 16%, transparent);
}
.pnl-bar-track > span {
  display: block; height: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--text-2) 62%, transparent);
}
.pnl-bar-v {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* marca de estado do tema — cinza, porque é informação e não julgamento */
.pnl-tag {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .02em; color: var(--text-2);
  background: color-mix(in srgb, var(--text-2) 12%, transparent);
}
.pnl-tag-aberto { background: color-mix(in srgb, var(--text-2) 20%, transparent); }
.pnl-nivel { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pnl-eixo + .pnl-eixo { margin-top: 18px; }
.pnl-eixo-k {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2);
}
/* ★ CARD DOBRÁVEL (pedido do dono, 31/07): "lista muito grande precisa de botão de
   recolher, para não poluir a tela principal, que precisa estar visual e clean".
   O cabeçalho inteiro é o controle, e ele carrega uma LINHA DE RESUMO que fica visível
   dobrado — recolher tira a lista da tela, nunca o sinal. Estado guardado em localStorage:
   é tela de trabalho, aberta muitas vezes, e reabrir o mesmo card todo dia é tarefa. */
.pnl-dobra { padding: 0; }
.pnl-dobra-cab {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 18px 20px; cursor: pointer; list-style: none;
  border-radius: calc(var(--radius) - 1px);
}
.pnl-dobra-cab::-webkit-details-marker { display: none; }
.pnl-dobra-cab:hover { background: color-mix(in srgb, var(--text-2) 4%, transparent); }
.pnl-dobra-cab .sec-tag { margin: 0; }
.pnl-dobra-resumo {
  font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
/* seta em CSS puro: gira ao abrir, e é o único sinal de afordância de que o cabeçalho
   inteiro é clicável (azul seria interação — mas o card não é um CTA, §2) */
.pnl-dobra-seta {
  margin-left: auto; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-2); border-bottom: 1.6px solid var(--text-2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.pnl-dobra[open] .pnl-dobra-seta { transform: rotate(-135deg) translate(-2px, -2px); }
.pnl-dobra-corpo { padding: 0 20px 18px; }
.pnl-dobra-corpo > .pnl-legenda:first-child, .pnl-dobra-corpo > .pnl-stats:first-child { margin-top: 0; }
.pnl-dobra-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pnl-dobra-seta { transition: none; } }

/* o resto dos temas atrás de um disclosure: sai do primeiro olhar, não da tela */
.pnl-mais { margin-top: 12px; }
.pnl-mais > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  padding: 6px 0; list-style: none;
}
.pnl-mais > summary::-webkit-details-marker { display: none; }
.pnl-mais > summary::before { content: "\25B8  "; }
.pnl-mais[open] > summary::before { content: "\25BE  "; }
.pnl-mais > summary:hover { color: var(--text); }

@media (max-width: 640px) {
  .painel-grid { grid-template-columns: 1fr; }
  /* Em coluna estreita a trilha e o valor competem com o rótulo: o rótulo toma a linha
     inteira e a barra desce com o valor ao lado. */
  .pnl-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .pnl-bar-k { grid-column: 1 / -1; }
  .pnl-stat-sep { padding-left: 0; border-left: 0; }
}

/* Consulta curada — painel de afunilamento. Com a área de resultados vazia até o primeiro
   filtro, ELE é a tela: três blocos separados por fio (busca · eixos · atalho), com
   respiro entre si. Amontoados, os cinco controles liam-se como uma coisa só. */
.myth-picker {
  display: flex; flex-direction: column; gap: 16px;
  margin: 6px 0 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius);
}
.myth-filters { display: flex; flex-direction: column; gap: 16px; }
.mf-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* a busca ocupa o vão: contagem e "Limpar" ficam encostados à direita sem margin auto */
.mf-search {
  flex: 1 1 240px; min-width: 0; font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.mf-search:focus { border-color: var(--accent); }
.mf-count { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Barra que colapsa os eixos no mobile: no desktop ela nem existe na árvore (os três
   eixos cabem lado a lado), então `display:none` aqui e `inline-flex` só no ≤640px. */
.mf-toggle { display: none; }
.myth-picker .f-clear { align-self: auto; margin-left: 0; }
.f-clear:disabled { opacity: .45; cursor: default; }
.f-clear:disabled:hover { background: var(--bg); color: var(--text-2); }
/* fio separando os blocos (o "ir direto" é o último filho do painel) */
.chip-axes, .myth-picker > .f {
  padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
/* Um eixo por COLUNA: os três lado a lado ocupam o espaço que a lista liberou e separam
   os eixos de vez — empilhados, "Assunto" e "Desfecho" colavam um no outro. */
.chip-axes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.chip-axis { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* ⚠ 14/08/2026 — 12px, NÃO os 11px do kicker do §4. O kicker rotula uma seção que se LÊ;
   estes três rotulam a decisão que o visitante vem TOMAR, e no menor corpo do sistema
   ("filtros e fontes ficaram pequenos", pedido do dono). O §4 continua valendo para
   `.sec-tag` e companhia — a exceção é declarada aqui, não uma deriva. */
.chip-axis-k {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-2);
}
.chip-row { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* Chip ligado = azul (§2: azul é interação, e o chip É o controle). RÁDIO: um valor por
   eixo, e o número é exatamente quantas afirmações a tela mostra ao clicar nele. */
.chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; font-size: 13.5px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; color: var(--text);
  border: 1px solid var(--border); background: var(--bg);
  transition: border-color .2s, background .2s;
}
.chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.chip.is-on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 650;
}
/* zerado fica inerte e esmaecido, mas continua na tela: sumir faz o painel saltar */
.chip:disabled { opacity: .42; cursor: default; }
.chip-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chip.is-on .chip-n { color: var(--accent); }
/* ★★★ 14/08/2026 — ESTILO ANCORADO NO NÓ, NÃO NO PAI. Estas duas regras eram
   `.myth-picker .f` e `.myth-picker select`, e o seletor deixou de casar no dia em que o
   controle passou a MUDAR DE PAI (repouso → dentro do cartão que ensina). O sintoma foi um
   `<select>` cru do navegador dentro de um cartão desenhado, sem erro em lugar nenhum.
   ⚠ Regra: elemento que se move leva o estilo pelo PRÓPRIO id/classe. */
#picker-wrap { display: flex; flex-direction: column; gap: 5px; width: 100%; font-size: 11.5px; color: var(--text-2); font-weight: 600; }
#f-mito {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg);
  width: 100%; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 34px 9px 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Filtros legados do modo bibliográfico */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 8px 0 4px; padding: 12px 14px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius);
}
.filters .f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.filters .f-wide { flex: 1 1 260px; }
.filters .f-wide select { width: 100%; }
.filters select {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer;
}
.filters .chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; align-self: end; }
.filters .chk input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.f-clear {
  align-self: end; margin-left: auto; border: 1px solid var(--border); background: var(--bg);
  color: var(--text-2); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; transition: all .2s;
}
.f-clear:hover { background: var(--surface-2); color: var(--text); }

/* Veredito por mito */
/* ⚠️ SEM `overflow: hidden` — e a razão é funcional, não estética (06/08/2026). O corte
   existia só para conter a faixa colorida abaixo dentro do raio do card, mas cortava
   junto TODO balão de "i" do herói, que abre para cima: os quatro (selo, força, firmeza,
   procedência) apareciam com uma linha só, e os três antigos estavam assim desde sempre.
   A faixa agora se contém sozinha, pelo próprio raio. Achado na tela, não no código. */
.verdict {
  position: relative; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.verdict::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--verdict-color, var(--text-2));
  border-radius: var(--radius) 0 0 var(--radius);
}
/* ★ Contraste do selo do veredito (06/08/2026, aval do dono) — a mesma receita de 05/08.
   O selo NÃO tinha cor própria: herdava --verdict-color, e por isso o contraste dele era
   função do TONE. Medido na tela, tema claro: MITO 3,03 · VERDADE 3,95 · DEPENDE 4,08;
   escuro: MITO 3,84 · VERDADE 3,04. O 4,08 registrado no §16k era o MELHOR dos três, e o
   pior é o que a maioria dos mitos mostra. Daí --verdict-ink: uma TINTA só para o texto,
   escurecida contra --text por tone. O token da escala fica intocado, e a faixa lateral
   segue na cor cheia do nível — conserta-se a exibição, não a escala. */
.verdict-myth {
  --verdict-color: var(--baixo); --verdict-bg: color-mix(in srgb, var(--baixo) 13%, transparent);
  --verdict-ink: color-mix(in srgb, var(--baixo) 72%, var(--text));
}
.verdict-truth {
  --verdict-color: var(--ok); --verdict-bg: color-mix(in srgb, var(--ok) 12%, transparent);
  --verdict-ink: color-mix(in srgb, var(--ok) 76%, var(--text));
}
.verdict-depends {
  --verdict-color: var(--text-2); --verdict-bg: color-mix(in srgb, var(--text-2) 11%, transparent);
  --verdict-ink: color-mix(in srgb, var(--text-2) 89%, var(--text));
}
.verdict-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.verdict-seal {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 5px 11px; border-radius: 10px; background: var(--verdict-bg);
  color: var(--verdict-ink, var(--verdict-color)); font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
/* selo de força/certeza da evidência — MESMA escala do parecer (--ok/--atencao/--baixo/--alerta) */
.certeza { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.certeza.c-alta { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.certeza.c-mod { background: color-mix(in srgb, var(--atencao) 18%, transparent); color: var(--atencao); }
.certeza.c-baixa { background: color-mix(in srgb, var(--baixo) 18%, transparent); color: var(--baixo); }
.certeza.c-mb { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
/* ★ Selo de força DENTRO do herói do veredito — contraste, não cor nova (05/08/2026, aval do dono).
   Medido na tela: `--baixo` como texto dá 2,86 aqui e só 3,79 sobre BRANCO PURO; `--atencao`, 3,61.
   Logo clarear o fundo não alcança os 4,5 da WCAG AA em nenhum dos dois — quem resolve é escurecer
   o TEXTO dentro do componente, que é exatamente o que `.support-row .certeza` já faz desde sempre
   (4,88 medidos). O token da escala §3 fica INTOCADO: mexer nele moveria cor em todo o acervo, e
   ele passa onde o fundo é mais claro. Aqui o herói é o lugar onde o leitor olha primeiro.
   Calibrado NA TELA, não no olho: 70% dava 4,48 — passava de 2,86 e ainda reprovava por 0,02.
   64% dá 4,93, a mesma folga que o `.support-row` já tinha. Vale para os quatro níveis porque
   misturar em direção a `--text` aumenta o contraste nos DOIS temas (em claro o texto escurece
   sobre fundo claro; em escuro, clareia sobre fundo escuro) — a direção não tem como piorar.
   ⚠ NÃO usar `currentColor` aqui: dentro da própria propriedade `color` ele resolve para a cor
   HERDADA do pai, não para o token do nível — apagaria a escala §3 sem erro na tela.
   ⚠⚠⚠ E este bloco nasceu com o fecho de comentário no MEIO, o que custou 310 regras: a prosa
   que sobra cai fora do comentário, o parser a consome como prelúdio de seletor, e a primeira
   chave de abertura que ela contiver abre um bloco que nunca fecha — daí em diante a folha
   INTEIRA é engolida, sem erro nenhum na tela. Por isso a regra de escrita, agora com gate
   (`check_css_comentarios`): comentário de CSS não cita sinal de fecho nem chave em prosa. */
.verdict .certeza.c-alta  { color: color-mix(in srgb, var(--ok) 64%, var(--text)); }
.verdict .certeza.c-mod   { color: color-mix(in srgb, var(--atencao) 64%, var(--text)); }
.verdict .certeza.c-baixa { color: color-mix(in srgb, var(--baixo) 64%, var(--text)); }
.verdict .certeza.c-mb    { color: color-mix(in srgb, var(--alerta) 64%, var(--text)); }
/* procedência = sinal de confiança, não achado: vive no rodapé do card e nunca
   na linha do veredito, para não competir com a conclusão e a força da evidência */
.verdict-foot {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--text-2);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
/* I5 — como o item foi produzido, dito no ponto de consumo. Peso de rodapé: informa quem
   procura, sem competir com a conclusão nem com a força da evidência (mesma família do
   .verdict-foot, que é a procedência). */
.ia-nota {
  margin-top: 12px; padding-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-2);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.analysis > .ia-nota { margin-top: 16px; }
.verdict-question { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.verdict-headline { margin: 0; max-width: 760px; font-size: 22px; font-weight: 750; line-height: 1.22; letter-spacing: 0; }
.verdict-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.verdict-points li {
  position: relative; min-width: 0; padding: 10px 12px 10px 26px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-sm); background: var(--bg);
  color: var(--text); font-size: 13.5px; line-height: 1.4;
}
.verdict-points li::before {
  content: ""; position: absolute; left: 12px; top: 16px; width: 6px; height: 6px;
  border-radius: 999px; background: var(--verdict-color);
}

.myth-card {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.myth-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.support-block { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.support-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2); margin: 4px 2px 0;
}
.chart-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.chart-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.myth-chart-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.myth-chart-card .chart { margin-top: 10px; padding-top: 0; border-top: 0; }
.chart-kicker {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2);
}
.chart-source {
  margin-top: 8px; color: var(--text-2); font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.study-tile {
  min-width: 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.study-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* nos tiles (secundários, em lista) o selo é mais suave, mas na MESMA escala semântica */
.study-tile .certeza {
  background: color-mix(in srgb, var(--text-2) 12%, transparent);
  color: var(--text-2);
}
.study-tile .certeza.c-alta {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: color-mix(in srgb, var(--ok) 78%, var(--text));
}
/* ★ c-mod a 74% dava 4,27 medido na tela (06/08/2026, aval do dono): 69% leva a 4,62.
   Os vizinhos c-alta e c-baixa não se mexem — só o degrau que reprovava. */
.study-tile .certeza.c-mod {
  background: color-mix(in srgb, var(--atencao) 13%, transparent);
  color: color-mix(in srgb, var(--atencao) 69%, var(--text));
}
.study-tile .certeza.c-baixa {
  background: color-mix(in srgb, var(--baixo) 12%, transparent);
  color: color-mix(in srgb, var(--baixo) 74%, var(--text));
}
.study-tile .certeza.c-mb {
  background: color-mix(in srgb, var(--alerta) 10%, transparent);
  color: color-mix(in srgb, var(--alerta) 62%, var(--text));
}
.study-index {
  font-size: 12px; font-weight: 800; color: var(--text-2);
  padding: 3px 8px; border-radius: 999px; background: var(--bg);
}
/* desenho do estudo = INFORMAÇÃO (cinza), nunca a escala de julgamento */
.study-design {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2);
}
/* o h3 do tile carrega o ACHADO (frase nossa), por isso mais linhas que um título */
.study-tile h3 {
  margin: 0; font-size: 14.5px; line-height: 1.32; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.study-source {
  color: var(--text-2); font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.study-meta { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.study-takeaway {
  margin: 0; color: var(--text); font-size: 13px; line-height: 1.45;
  padding: 10px 11px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-2) 7%, transparent);
}
/* ★ --text-2 puro dava 4,39 aqui (06/08/2026, aval do dono). A tinta a 96% leva a 4,60
   e mantém o link discreto: é quase o mesmo cinza, o bastante para passar com margem. */
.support-link {
  align-self: flex-start; margin-top: auto; text-decoration: none;
  color: color-mix(in srgb, var(--text-2) 96%, var(--text));
  font-weight: 750; font-size: 12.5px; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--text-2) 5%, transparent);
}
.support-link:hover { color: var(--text); background: color-mix(in srgb, var(--text-2) 10%, transparent); }

/* ---- apoios além dos 3 em destaque: recolhidos, mas com a CONTAGEM à vista ---- */
.support-more { margin-top: 2px; }
.support-more > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 700;
  transition: border-color .2s, background .2s, color .2s;
}
.support-more > summary:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.support-more > summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.support-more[open] > summary::before { transform: rotate(90deg); }
.support-more > summary::-webkit-details-marker { display: none; }
.support-more .support-more-close,
.support-more[open] .support-more-open { display: none; }
.support-more[open] .support-more-close { display: inline; }
.support-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.support-row {
  display: flex; align-items: flex-start; gap: 11px; text-decoration: none; color: inherit;
  padding: 11px 13px; border-radius: var(--radius-sm); background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  transition: border-color .2s, background .2s;
}
a.support-row:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
}
.srow-index {
  flex: none; font-size: 11.5px; font-weight: 800; color: var(--text-2);
  padding: 2px 7px; border-radius: 999px; background: var(--surface-2);
}
.srow-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.srow-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srow-design {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2);
}
.srow-text { font-size: 13px; line-height: 1.4; color: var(--text); }
.srow-meta { font-size: 11.5px; color: var(--text-2); line-height: 1.3; }
.srow-go { flex: none; color: var(--text-2); font-size: 13px; padding-top: 2px; }
/* selo de confiabilidade na linha compacta: mesma escala, tom suave (igual ao tile) */
.support-row .certeza { background: color-mix(in srgb, var(--text-2) 12%, transparent); color: var(--text-2); }
.support-row .certeza.c-alta { background: color-mix(in srgb, var(--ok) 12%, transparent); color: color-mix(in srgb, var(--ok) 78%, var(--text)); }
.support-row .certeza.c-mod { background: color-mix(in srgb, var(--atencao) 13%, transparent); color: color-mix(in srgb, var(--atencao) 69%, var(--text)); }
.support-row .certeza.c-baixa { background: color-mix(in srgb, var(--baixo) 12%, transparent); color: color-mix(in srgb, var(--baixo) 74%, var(--text)); }
.support-row .certeza.c-mb { background: color-mix(in srgb, var(--alerta) 10%, transparent); color: color-mix(in srgb, var(--alerta) 62%, var(--text)); }
.contrib-card {
  margin-top: 2px; padding: 13px 15px; border: 1px dashed color-mix(in srgb, var(--text-2) 35%, var(--border));
  border-radius: var(--radius); color: var(--text-2); font-size: 13px; text-align: center;
  background: color-mix(in srgb, var(--text-2) 5%, transparent);
}
.contrib-card .link-inline {
  background: color-mix(in srgb, var(--text-2) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-2) 26%, var(--border));
  border-radius: 999px; padding: 3px 9px; color: var(--text); font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.contrib-card .link-inline:hover { background: color-mix(in srgb, var(--text-2) 14%, transparent); }

/* Cards de artigo */
.results { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 60px; }
.count { color: var(--text-2); font-size: 13px; margin: 6px 2px; font-variant-numeric: tabular-nums; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--text-2); font-size: 13.5px; }
.analysis .meta { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.card .meta a { color: var(--accent); text-decoration: none; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.badge {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
}
/* desenho informado, ainda não confirmado = neutro (cinza); confirmado (.dv) = verde.
   Azul fica reservado a ação/herói/marca, não a rótulo informativo. */
.badge.design { background: var(--surface-2); color: var(--text-2); }
.badge.design.dv { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

/* Histograma por ano/década (estilo PubMed) */
.histo { margin: 4px 0 16px; padding: 12px 14px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: var(--radius); }
.histo-title { font-size: 11.5px; color: var(--text-2); font-weight: 500; margin-bottom: 8px; }
.histo-bars { display: flex; align-items: flex-end; gap: 3px; min-height: 62px; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.histo-bar { width: 100%; max-width: 26px; background: var(--accent); border-radius: 3px 3px 0 0;
  opacity: .85; transition: opacity .15s; }
.histo-col:hover .histo-bar { opacity: 1; }
.histo-lab { font-size: 9.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge.free { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.badge.unverified { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.badge.verified { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.badge.analise { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-weight: 700; }

.note {
  margin: 12px 0 0; padding: 11px 13px; border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14.5px; color: var(--text);
}
.note .label { color: var(--warning); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

.panel {
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 22px; color: var(--text-2); font-size: 14px;
}
/* Bloco de análise (parecer) — sem caixa externa: os cards internos ficam na MESMA
   largura do card "Nome do artigo"; o gap cuida do espaçamento uniforme. */
.analysis {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 20px;
}
.analysis > * { margin-top: 0; margin-bottom: 0; }
.desenho-wrap { display: flex; flex-direction: column; gap: 10px; }
.analysis h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
/* Principais achados (destaque objetivo, topo do parecer) */
.achados {
  margin: 12px 0; padding: 12px 16px;
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
  border-left: 4px solid var(--success); border-radius: var(--radius);
}
.achados-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--success); margin-bottom: 6px; }
.ach-list { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.55; }
.ach-list li { margin: 4px 0; }
.abadges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge.verdict { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; }
.doms { display: flex; flex-direction: column; gap: 10px; }
.dom { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.dmark { font-weight: 700; font-size: 16px; line-height: 1.3; min-width: 16px; }
.quote { color: var(--text-2); font-size: 13.5px; font-style: italic; margin-top: 3px; }
.bhnote { color: var(--text-2); font-size: 14px; }

/* --- verificação de domínio: PT na frente, citação original recolhível --- */
.doms { display: flex; flex-direction: column; gap: 12px; }
.dom-body { flex: 1; }
.dom-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dom-nivel {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-2); background: color-mix(in srgb, var(--text-2) 12%, transparent);
  padding: 1px 8px; border-radius: 999px;
}
.dom-desc { font-size: 14.5px; color: var(--text); line-height: 1.5; margin-top: 3px; }
.cite { margin-top: 4px; }
.cite summary {
  cursor: pointer; font-size: 11.5px; color: var(--text-2); font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
}
.cite summary::before { content: "▸"; font-size: 9px; transition: transform .15s; }
.cite[open] summary::before { transform: rotate(90deg); }
.cite summary::-webkit-details-marker { display: none; }
.cite .quote {
  margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--border);
  background: color-mix(in srgb, var(--text-2) 5%, transparent); border-radius: 0 6px 6px 0;
}

/* --- divulgação progressiva: metodologia detalhada recolhida por padrão --- */
.metodologia { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 4px; }
.metodologia > summary {
  cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13.5px;
  padding: 8px 0; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.metodologia > summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.metodologia[open] > summary::before { transform: rotate(90deg); }
.metodologia > summary::-webkit-details-marker { display: none; }
.leitura { font-size: 15px; line-height: 1.55; }
.leitura-card { border-left: 4px solid color-mix(in srgb, var(--text-2) 45%, var(--border)); }
.leitura-txt { font-size: 15px; line-height: 1.6; color: var(--text); }

/* ===== módulo didático de análise (resumo Q&A, seções, checklists) ===== */
:root {
  --ok: #2E7D5B; --atencao: #B97A00; --baixo: #C76A1C; --alerta: var(--danger); --neutro: var(--text-2);
}
.sec-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.sec-tag svg, .selo-k svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .85; }
.selo-k svg { vertical-align: -2px; margin-right: 5px; }

/* "Em resumo" — frase-chave (bottom line up front) no topo da análise */
.bluf {
  font-size: 15.5px; line-height: 1.55; color: var(--text);
  padding: 13px 15px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-2) 8%, var(--surface));
  border-left: 4px solid var(--text-2);
}
.bluf-k { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 4px; }

/* Herói do parecer: veredito (Confiabilidade) + "Em resumo" no topo, colorido pelo nível */
.parecer-hero {
  display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 14px 22px; align-items: start;
  padding: 16px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--text-2) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-left: 5px solid var(--neutro);
}
.parecer-hero.nivel-ok      { border-left-color: var(--ok);      background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.parecer-hero.nivel-atencao { border-left-color: var(--atencao); background: color-mix(in srgb, var(--atencao) 7%, var(--surface)); }
.parecer-hero.nivel-baixo   { border-left-color: var(--baixo);   background: color-mix(in srgb, var(--baixo) 7%, var(--surface)); }
.parecer-hero.nivel-alerta  { border-left-color: var(--alerta);  background: color-mix(in srgb, var(--alerta) 6%, var(--surface)); }
.ph-selo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ph-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.ph-k svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }
.ph-v-row { display: inline-flex; align-items: center; gap: 7px; }
.ph-v { font-size: 22px; font-weight: 800; line-height: 1.1; }
.ph-v.nivel-ok { color: var(--ok); } .ph-v.nivel-atencao { color: var(--atencao); }
.ph-v.nivel-baixo { color: var(--baixo); } .ph-v.nivel-alerta { color: var(--alerta); }
.ph-resumo { min-width: 0; }
.ph-resumo-k { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 5px; }
.ph-resumo p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* glossário: termo sublinhado pontilhado; definição no hover/foco (ancorada à esquerda
   do termo p/ não sair da tela) */
.gloss { position: relative; border-bottom: 1px dotted var(--text-2); cursor: help; }
.gloss .info-pop { left: 0; right: auto; transform: translateY(4px); }
.gloss:hover .info-pop, .gloss:focus .info-pop, .gloss:focus-visible .info-pop { display: block; opacity: 1; visibility: visible; transform: translateY(0); }

/* pergunta do estudo (mais visual) */
.perg-q { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 10px; }
.pergunta-card .resumo-intro { color: var(--text-2); margin-bottom: 0; }

/* spin: resultado claro + sub-rótulo dos sinais */
.spin-result { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spin-sub { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }

/* "como ler" discreto no gráfico */
.chart-help { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-2); display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }

/* painel de resumo da avaliação */
.resumo {
  margin: 14px 0; padding: 17px 19px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius); background: var(--surface);
}
/* selo de confiabilidade — discreto/clean (sem caixa); a cor fica só no nível */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.selo svg { width: 13px; height: 13px; opacity: .7; }
.selo-k { color: var(--text-2); }
.selo-v { font-weight: 700; }
.selo-v.nivel-ok      { color: var(--ok); }
.selo-v.nivel-atencao { color: var(--atencao); }
.selo-v.nivel-baixo   { color: var(--baixo); }
.selo-v.nivel-alerta  { color: var(--alerta); }
/* tooltips do "i"/glossário são posicionados por JS (placePop) para nunca vazar a
   tela; estes overrides só servem de estado pré-hover (o balão fica invisível). */
.selo .info-pop { left: auto; right: 0; transform: translateY(4px); }
.selo .info:hover .info-pop, .selo .info:focus .info-pop, .selo .info:focus-visible .info-pop { display: block; transform: translateY(0); }

/* formato consolidado: texto enxuto + pergunta + avaliação crítica unificada */
.resumo-intro { font-size: 15px; line-height: 1.55; color: var(--text); margin-bottom: 12px; }
.resumo-perg { font-size: 14.5px; line-height: 1.5; color: var(--text); margin-bottom: 14px; }
.rp-k { font-weight: 700; color: var(--text-2); }
.aval { display: flex; flex-direction: column; gap: 10px; }
.aval-item {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.aval-item:last-child { border-bottom: none; padding-bottom: 0; }
.aval-q { flex: 1 1 240px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.aval-a { display: inline-flex; align-items: center; gap: 4px; }

/* análise metodológica em 2 colunas (mini-cards dentro do card maior) */
.aval-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mc-item {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-left: 4px solid var(--neutro);
  border-radius: var(--radius-sm); background: var(--bg);
}
.mc-item.nivel-ok      { border-left-color: var(--ok);      background: color-mix(in srgb, var(--ok) 6%, var(--bg)); }
.mc-item.nivel-atencao { border-left-color: var(--atencao); background: color-mix(in srgb, var(--atencao) 8%, var(--bg)); }
.mc-item.nivel-baixo   { border-left-color: var(--baixo);   background: color-mix(in srgb, var(--baixo) 8%, var(--bg)); }
.mc-item.nivel-alerta  { border-left-color: var(--alerta);  background: color-mix(in srgb, var(--alerta) 7%, var(--bg)); }
.mc-q { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; line-height: 1.35; }
/* mini-card de resultado: rótulo (azul) + texto */
.mc-rk { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-2); }
.mc-rv { font-size: 14px; color: var(--text); line-height: 1.5; }
/* 3 colunas (metodologia) — degrada p/ 2 e 1 em telas menores */
.aval-grid.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .aval-grid.g3 { grid-template-columns: repeat(2, 1fr); } }

/* Sem vão: item órfão na última linha ocupa o espaço restante (evita célula vazia) */
.ach-grid > *:last-child:nth-child(odd),
.aval-grid:not(.g3) > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 641px) and (max-width: 900px) {
  .aval-grid.g3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
  .aval-grid.g3 > *:last-child:nth-child(3n+1) { grid-column: 1 / -1; }   /* órfão sozinho ocupa a linha */
  .aval-grid.g3 > *:last-child:nth-child(3n+2) { grid-column: span 2; }   /* 2 na última linha preenchem */
}

/* achados em destaque (verde) no topo de "Resultados do estudo" — arejado e escaneável */
.ach-destaque {
  margin: 8px 0 16px; padding: 14px 16px; list-style: none;
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border-left: 4px solid var(--success); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
}
.ach-destaque li { position: relative; padding-left: 22px; margin: 0 0 11px; line-height: 1.6; }
.ach-destaque li:last-child { margin-bottom: 0; }
.ach-destaque li::before {
  content: ""; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--success);
}

/* achados em 2 colunas de mini-cards neutros (padrão dos demais mini-cards) */
.ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0 4px; }
.ach-card {
  padding: 11px 13px; border: 1px solid var(--border); border-left: 4px solid var(--neutro);
  background: var(--bg); border-radius: var(--radius-sm);
}
.ach-card .mc-rk { margin-bottom: 4px; }
.ach-tx { font-size: 14px; line-height: 1.5; color: var(--text); }
/* sinal de indício de causalidade (Bradford Hill), abaixo dos mini-cards de desenho */
.bh-sinal { margin-top: 0; }
/* nota/detalhe dentro de mini-card (desenho / causa-efeito) */
.mc-item .dc-det, .mc-item .dc-note { margin-top: 2px; }

/* gráfico central do resultado (SVG, estilo Aloha) */
.chart { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.chart-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 10px; }
/* tooltip do "como ler" fica à direita → abre p/ a esquerda e não sai da tela */
.chart-help .info-pop { left: auto; right: 0; transform: translateY(4px); }
.chart-help .info:hover .info-pop, .chart-help .info:focus .info-pop, .chart-help .info:focus-visible .info-pop { display: block; transform: translateY(0); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-unidade { font-size: 12px; color: var(--text-2); line-height: 1.4; margin-top: 8px; }
.chart .ref-line { stroke: var(--text-2); stroke-dasharray: 4 4; opacity: .55; }
.chart .tick-label { fill: var(--text-2); font-size: 11px; }
.chart .row-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.chart .row-val { fill: var(--text); font-size: 12px; }

/* spin recolhível dentro da Leitura final */
.spin-fold { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 6px; }
.spin-fold > summary {
  cursor: pointer; color: var(--text-2); font-weight: 700; font-size: 14px; padding: 6px 0;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.spin-fold > summary:hover { color: var(--text); }
.spin-fold > summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.spin-fold[open] > summary::before { transform: rotate(90deg); }
.spin-fold > summary::-webkit-details-marker { display: none; }
.spin-fold-body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  .aval-grid, .aval-grid.g3, .ach-grid, .parecer-hero { grid-template-columns: 1fr; }
  .art-head h3 { font-size: 17px; }
  .art-pt { font-size: 14px; }
}

.resumo-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rf { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; align-items: baseline; }
.rf-k { flex: 0 0 165px; font-weight: 600; color: var(--text-2); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.rf-v { flex: 1; color: var(--text); }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.qa {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--neutro);
}
.qa-q { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.qa-a { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }
.qa-det { display: block; margin-top: 4px; line-height: 1.45; }

/* badge de resposta colorido por valência */
.resp { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-right: 6px; }
.nivel-ok      { border-left-color: var(--ok); }
.nivel-atencao { border-left-color: var(--atencao); }
.nivel-baixo   { border-left-color: var(--baixo); }
.nivel-alerta  { border-left-color: var(--alerta); }
.qa.nivel-ok      { background: color-mix(in srgb, var(--ok) 6%, var(--bg)); }
.qa.nivel-atencao { background: color-mix(in srgb, var(--atencao) 8%, var(--bg)); }
.qa.nivel-alerta  { background: color-mix(in srgb, var(--alerta) 7%, var(--bg)); }
.resp.nivel-ok      { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.resp.nivel-atencao { background: color-mix(in srgb, var(--atencao) 18%, transparent); color: var(--atencao); }
.resp.nivel-baixo   { background: color-mix(in srgb, var(--baixo) 18%, transparent); color: var(--baixo); }
.resp.nivel-alerta  { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.resp.nivel-neutro  { background: color-mix(in srgb, var(--neutro) 16%, transparent); color: var(--neutro); }

/* ícone "i" de aprofundamento — tooltip no hover/foco */
.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; font-size: 10px; font-weight: 700; font-style: italic;
  text-transform: none; letter-spacing: 0; line-height: 1;
  color: var(--text-2); background: transparent; border: 1.3px solid var(--text-2);
  cursor: help; vertical-align: middle; margin-left: 4px; flex: 0 0 auto; opacity: .75; transition: opacity .15s, color .15s, border-color .15s;
}
.info:hover, .info:focus { opacity: 1; color: var(--text); border-color: var(--text); }
.info-pop {
  position: absolute; bottom: 145%; left: 50%; transform: translateX(-50%) translateY(4px);
  display: none; width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 9px 12px; font-size: 13.5px; font-weight: 400;
  font-style: normal; line-height: 1.5; text-align: left; white-space: normal; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 30; pointer-events: none;
}
.info-pop::after {
  content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--surface);
}
/* ★★★ 14/08/2026 — BALÃO ESTRUTURADO (`{ lead, itens, nota }` em `infoIcon`).
   Um pouco mais largo que o de prosa (340 contra 280): a lista quebra em mais linhas do que
   o parágrafo que ela substitui, e o ganho de varredura se perde se cada item ocupar três
   linhas. O teto de viewport é o MESMO — no mobile quem manda continua sendo `100vw - 32px`. */
.info-pop.ip-rico { max-width: min(340px, calc(100vw - 32px)); padding: 10px 12px; }
.ip-lead { display: block; font-weight: 600; color: var(--text); }
.ip-lista { margin: 7px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
/* `align-items: baseline` alinharia o ponto pelo texto e ele subiria com a primeira linha;
   o `margin-top` fixo o prende à altura da maiúscula, que é onde o olho o procura. */
.ip-lista > li { display: flex; align-items: flex-start; gap: 7px; }
.ip-lista .dot-nivel { margin-top: 6px; }
.ip-lista strong { font-weight: 600; color: var(--text); }
.ip-nota { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; }
/* A escala de CONFIABILIDADE (`nivel-*`, um estudo) ao lado da de FORÇA (`c-*`, o conjunto):
   o `.dot-nivel` só conhecia a segunda, e sem estas quatro linhas o ponto do balão da
   confiabilidade sairia cinza — mostrando a régua errada em silêncio. */
.dot-nivel.nivel-ok { background: var(--ok); }
.dot-nivel.nivel-atencao { background: var(--atencao); }
.dot-nivel.nivel-baixo { background: var(--baixo); }
.dot-nivel.nivel-alerta { background: var(--alerta); }
.info:hover .info-pop, .info:focus .info-pop, .info:focus-visible .info-pop {
  display: block; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ★ O SEGUNDO ÍCONE do painel (item 1 do brief, 31/07/2026) — "o que fazer com este
   número", ao lado do "i" que diz o que ele é.

   Distinto por FORMA, nunca por cor: azul é interação (§2) e nenhum dos dois é clicável; a
   escala verde→vermelho é julgamento e já está na faixa do mini-card. Sobrou o preenchido
   contra o vazado, mais o glifo — lâmpada (`ICONS.pratica`, já no sistema) contra letra.

   ⚠ MORA AQUI, JUNTO DO `.info`, E NÃO NA SEÇÃO DO PAINEL. Primeiro ficou lá e o fundo
   simplesmente não aparecia: o bloco do painel vem ANTES deste no arquivo, e
   `.info { background: transparent }` — mesma especificidade, declarado depois — vencia.
   Ninguém teria achado isso lendo o código; achou-se olhando a tela ampliada. */
.info-acao {
  width: 16px; height: 16px; opacity: .9;
  color: var(--surface); background: var(--text-2); border-color: var(--text-2);
}
.info-acao > svg { width: 9.5px; height: 9.5px; display: block; }
.info-acao:hover, .info-acao:focus {
  opacity: 1; color: var(--surface); background: var(--text); border-color: var(--text);
}
/* o balão volta ao contraste normal: só o gatilho é preenchido, não a explicação */
.info-acao .info-pop { color: var(--text); background: var(--surface); }
.info-acao .info-pop strong { display: inline-block; margin-bottom: 2px; }

/* seções recolhíveis (metodologia / resultados / spin) */
.sec { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.sec > summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 15.5px; background: var(--surface);
  list-style: none; display: flex; align-items: center; gap: 8px; border-radius: calc(var(--radius) - 1px);
}
.sec[open] > summary { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after { content: "▸"; margin-left: auto; color: var(--text-2); transition: transform .15s; }
.sec[open] > summary::after { transform: rotate(90deg); }
.sec[open] > summary { border-bottom: 1px solid var(--border); }
.sec > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.sec > *:last-child { margin-bottom: 14px; }
.sec h4 { margin: 14px 0 8px; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.detfold { margin-top: 12px; }
.detfold > summary { cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 14px; }
.detfold > summary:hover { color: var(--text); }

/* linhas de checklist (metodologia e spin) */
.rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: flex-start; padding-left: 4px; border-left: 3px solid var(--neutro); }
.row.nivel-ok { border-left-color: var(--ok); }
.row.nivel-atencao { border-left-color: var(--atencao); }
.row.nivel-alerta { border-left-color: var(--alerta); }
.row .dot { display: none; }
.row-body { flex: 1; padding-left: 8px; }
.row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.row-com { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
.mit {
  margin-top: 6px; padding: 8px 12px; font-size: 13.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 8px; color: var(--text);
}

/* cabeçalho do artigo (modo Análise): rótulo + título + tradução PT; selo discreto */
.art-head { position: relative; }
.art-head .selo { position: absolute; top: 20px; right: 20px; }   /* desktop: canto sup. direito */
.art-head .art-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 12px; }
.art-head h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.art-pt { font-size: 15px; color: var(--text-2); line-height: 1.4; margin-bottom: 8px; }
@media (max-width: 640px) {
  .art-head .selo { position: static; margin-top: 10px; }   /* mobile: no fim do cabeçalho */
  .selo .info-pop { max-width: 220px; }                      /* cabe à esquerda do "i" no mobile */
}

/* card "Desenho do estudo" + pode avaliar causa e efeito */
.desenho-card {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.dc-item { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 14.5px; }
.dc-k { flex: 0 0 190px; font-weight: 700; color: var(--text-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em; }
.dc-v { flex: 1; color: var(--text); font-weight: 600; }
.dc-det { font-size: 13.5px; color: var(--text-2); line-height: 1.45; margin-left: 0; }
.dc-ce { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.dc-note { color: var(--text-2); font-size: 13.5px; line-height: 1.45; }

/* grade de resultados + definição de spin */
.res-grid { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.spin-def { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pts { margin: 4px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--text); }
.pts li { margin: 3px 0; }
.expl { margin-top: 12px; font-size: 13.5px; }
.expl summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.expl p { color: var(--text); margin: 8px 0 0; }
.empty { text-align: center; color: var(--text-2); padding: 40px 0; }
/* Legenda da grade (consulta sem mito escolhido): explica a ANATOMIA do cartão, que o
   subtítulo da tela não diz. Uma linha discreta — a caixa de convite tracejada que ficava
   aqui só repetia a instrução do subtítulo e ocupava meia tela. */
/* fluxo inline, não flex: o "i" é inline-flex e precisa seguir a ÚLTIMA palavra. Em
   flex ele vira item irmão e, quando a frase quebra no mobile, descola para a direita. */
/* ★★★ 14/08/2026 — A LEGENDA VIROU A ANATOMIA DO CARTÃO (D2 do dono).
   Era uma frase de uma linha com um "i" no fim; agora nomeia os TRÊS termos, cada um com o
   seu "i". A decisão foi entre isto e um "i" por termo DENTRO de cada cartão — que, com 14
   cartões, dariam 42 ícones, contra o §6e e contra o próprio pedido de tela mais limpa.
   Grade de 3 colunas para casar com a grade de cartões abaixo: o leitor lê "Resposta ·
   Força · Firmeza" na mesma ordem em que os encontra dentro do cartão. */
.myth-legend { margin: 0 2px 14px; }
.ml-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2); margin-bottom: 9px;
}
.ml-termos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px;
  margin: 0; padding: 11px 14px;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius-sm);
}
.ml-item > dt {
  display: flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.ml-item > dd { margin: 1px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }

/* I9 — estado vazio que ENSINA: duas rotas lado a lado, cada uma com os seus três passos
   e o seu próprio botão. Sem cor saturada e sem caixa tracejada de "convite": é instrução
   de uso, não chamada de marketing — a home já fez essa parte. */
.teach { margin: 4px 2px 0; }
.teach-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2); margin-bottom: 12px;
}
/* ⚠ `minmax(0, 1fr)`, não `1fr`: o `<select>` que agora mora na 2ª rota tem largura
   intrínseca da opção mais longa, e com `1fr` (que é `minmax(auto, 1fr)`) ele EMPURRAVA a
   coluna — as duas rotas saíam com larguras bem diferentes, medido na tela. */
.teach-rotas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.teach-rota {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 18px;
}
.teach-k { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.teach-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.teach-passos li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13.5px; line-height: 1.45; color: var(--text-2);
}
/* número em --brand: é marca/estrutura, como os passos do "Como funciona" (§2) */
.teach-num {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.teach-cta { margin-top: auto; padding: 9px 18px; font-size: 13.5px; }
/* O <select> real, movido para dentro da 2ª rota (ver `posicionarPicker`): ele É a ação
   daquele cartão, no lugar do botão que antes rolava a tela até ele. */
.teach-slot { margin-top: auto; width: 100%; }
.teach-slot > .f { margin: 0; width: 100%; }
/* Rótulo escondido só quando o controle está DENTRO do cartão, cujo título já o nomeia.
   ⚠ `visibility`/`display:none` no <span>, nunca removê-lo: `applyStaticI18n` reescreve
   esse nó a cada troca de idioma, e o <select> ficaria sem nome acessível. */
.f.no-rotulo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) { .teach-rotas { grid-template-columns: 1fr; } }
/* A legenda acompanha a GRADE DE CARTÕES, não a largura da tela: enquanto os cartões estão
   em 3 colunas ela também está, e cada termo fica sobre a coluna que ele descreve. Abaixo
   disso vira lista — 3 colunas de 100px partiriam "Força da evidência" em três linhas. */
@media (max-width: 900px) { .ml-termos { grid-template-columns: 1fr; gap: 9px; } }
.myth-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 3 colunas só sobram no desktop: abaixo disso a pergunta quebra em 4+ linhas */
@media (max-width: 900px) { .myth-options { grid-template-columns: repeat(2, 1fr); } }
/* Cartão didático: pergunta em cima, e cada valor com o seu rótulo embaixo. Uma única
   cor saturada (o selo) — hover discreto por borda/sombra, sem tingir o fundo (§5). */
.myth-option {
  display: flex; flex-direction: column; gap: 11px;
  text-align: left; padding: 15px 16px; cursor: pointer; font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius); background: var(--surface);
  color: var(--text); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s;
}
.myth-option:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
}
.myth-option-q { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--text); }
/* margin-top:auto encosta o bloco no rodapé — os cartões da linha alinham os rótulos
   mesmo com perguntas de alturas diferentes. */
.myth-option-rows {
  margin-top: auto; display: flex; flex-direction: column; gap: 7px;
  padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.myth-option-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.myth-option-k {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2);
}
.myth-option-v { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
/* Firmeza SEM ponto e SEM pílula: a escala de cor é reservada à evidência (§2/§6e), e um
   terceiro bloco colorido por cartão viraria o mosaico que o §6e existe para impedir — o
   oposto do item 1 do mesmo pedido. O recuo de 14px (ponto 8px + gap 6px) alinha o valor
   com o da linha de cima; sem ele as duas colunas de valor ficariam desencontradas. */
.myth-option-firmeza { padding-left: 14px; }
/* a força entra por ponto, não por pílula: mantém a régua de cor sem competir com o selo */
.dot-nivel { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--text-2); }
.dot-nivel.c-alta { background: var(--ok); }
.dot-nivel.c-mod { background: var(--atencao); }
.dot-nivel.c-baixa { background: var(--baixo); }
.dot-nivel.c-mb { background: var(--alerta); }
.myth-option .verdict-seal {
  min-height: 0; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .02em;
}
/* o "i" cola na pílula da força, em vez de herdar o gap largo do .verdict-top */
.certeza-line { display: inline-flex; align-items: center; flex-wrap: wrap; }
/* Firmeza fica DELIBERADAMENTE sem cor: a escala saturada é reservada à evidência (§2),
   e o herói já gasta sua cor no selo + na pílula da força. Aqui o peso vem da tipografia,
   com uma separação sutil da pílula vizinha para as duas medidas não se lerem como uma só. */
.firmeza {
  font-size: 11px; font-weight: 700; color: var(--text-2);
  padding: 2px 0 2px 10px; margin-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
/* mesmo selo, na lista de mitos: a mesma tinta, pelo mesmo motivo (06/08/2026) */
.seal-myth {
  --verdict-color: var(--baixo); --verdict-bg: color-mix(in srgb, var(--baixo) 13%, transparent);
  --verdict-ink: color-mix(in srgb, var(--baixo) 72%, var(--text));
}
.seal-truth {
  --verdict-color: var(--ok); --verdict-bg: color-mix(in srgb, var(--ok) 12%, transparent);
  --verdict-ink: color-mix(in srgb, var(--ok) 76%, var(--text));
}
.seal-depends {
  --verdict-color: var(--text-2); --verdict-bg: color-mix(in srgb, var(--text-2) 11%, transparent);
  --verdict-ink: color-mix(in srgb, var(--text-2) 89%, var(--text));
}
/* ===== Histórico por artefato (I1) + filtro por classe (I2) — 07/08/2026 =============
   A COR MORA NO PONTO, NUNCA NO TEXTO — e isso é decisão de contraste, não de gosto.
   `--atencao` como texto mede 3,61 sobre a superfície clara e `--baixo` mede 2,86 (§16k):
   pintar o rótulo da classe reprovaria o selo de novo, como já reprovou nos 3 tons. Aqui o
   ponto carrega a cor (é decorativo, `aria-hidden`) e o RÓTULO carrega o significado, em
   `--text`. Quem lê sem enxergar cor não perde nada — o nome da classe está escrito. */
.hist .hist-body { padding-top: 4px; }
.hist-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hist-f {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s;
}
.hist-f:hover { background: var(--surface); }
.hist-f.is-on { background: var(--surface-2); border-color: color-mix(in srgb, var(--text-2) 55%, var(--border)); font-weight: 600; }
.hist-n { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hist-f.is-on .hist-n { color: var(--text); }

.hist-lista { list-style: none; margin: 0; padding: 0; }
.hist-item {
  display: grid; grid-template-columns: 10px 92px 1fr; gap: 4px 12px;
  align-items: center; padding: 9px 0; border-top: 1px solid var(--border);
}
.hist-item:first-child { border-top: 0; }
.hist-dot {
  width: 8px; height: 8px; border-radius: 50%; align-self: center;
  background: var(--neutro); flex: 0 0 auto;
}
.hist-grau  .hist-dot { background: var(--atencao); }
.hist-texto .hist-dot { background: var(--brand); }
.hist-forma .hist-dot { background: color-mix(in srgb, var(--text-2) 55%, transparent); }
.hist-publicacao .hist-dot { background: var(--ok); }
.hist-data { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-classe { font-size: 14px; font-weight: 600; color: var(--text); }

.hist-vazio, .hist-regua, .hist-piso { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.hist-regua {
  margin-top: 14px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-2) 7%, var(--surface));
  border-left: 3px solid color-mix(in srgb, var(--text-2) 40%, var(--border));
}
.hist-regua p { margin: 0; }
/* As definições das classes PRESENTES, uma vez cada. O ponto repete a cor da linha do
   tempo para o leitor casar legenda e lista sem precisar da cor — o nome está nos dois. */
.hist-defs { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.hist-defs li { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: baseline; }
.hist-defs strong { color: var(--text); font-weight: 600; }
.hist-defs .hist-dot { align-self: center; }
.hist-dot-grau { background: var(--atencao); }
.hist-dot-texto { background: var(--brand); }
.hist-dot-forma { background: color-mix(in srgb, var(--text-2) 55%, transparent); }
.hist-dot-publicacao { background: var(--ok); }
.hist-piso { margin-top: 8px; }
.hist-vazio { margin-top: 4px; font-style: italic; }

footer { color: var(--text-2); font-size: 12px; padding: 30px 0; border-top: 1px solid var(--border); }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

/* Responsividade — telas estreitas */
@media (max-width: 640px) {
  /* Com a descrição fora da linha, data e rótulo cabem lado a lado até em 390px — mas a
     coluna fixa de 92px sobrava, então ela vira automática e o rótulo fica com o resto. */
  .hist-item { grid-template-columns: 10px auto 1fr; gap: 3px 10px; }
  .hist-data { font-size: 12.5px; }
  .hist-f { padding: 5px 10px; font-size: 12.5px; }
  .wrap { padding: 0 16px; }
  .top .wrap { height: 54px; gap: 10px; }
  .brand { font-size: 15.5px; }
  .brand small { display: none; }
  .home-grid { grid-template-columns: 1fr; }
  .home-card, .home-card.primary { padding: 18px; gap: 14px; align-items: flex-start; }
  .home-hero { margin-top: 18px; }
  /* Landing comercial: tudo em 1 coluna no mobile */
  .flagship-grid, .value-grid, .cf-blocks { grid-template-columns: 1fr; }
  .home-card.flagship { padding: 20px; }
  .home-card.bonus-row { align-items: flex-start; }
  .lp-hero { margin-top: 14px; margin-bottom: 26px; }
  .lp-section { margin: 34px 0; }
  .tripe { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; text-align: left; }
  .tripe-visual svg { width: 116px; }
  /* header pílula enxuto no mobile: menos margem/padding p/ caber marca + chave + tema */
  header.top { padding: 10px 12px 0; }
  .top .wrap { gap: 8px; padding: 0 14px; }
  .link-btn { padding: 6px 11px; font-size: 12.5px; }
  /* ⚠ NÃO encolher abaixo de 32px: o `.lang-opt` é filho de `align-items: stretch`, e sua
     altura é a do container menos `padding: 3px`×2 e a borda×2. A 30px o alvo de toque caía
     a 22px, abaixo do mínimo de 24×24 do WCAG 2.2 SC 2.5.8 — e só no mobile, que é
     justamente onde se toca com o dedo (medido em 18/08; no desktop já dava 24 exatos). */
  .lang-switch { height: 32px; }
  .lang-opt { padding: 0 9px; font-size: 11.5px; }
  .mode-nav { margin: 14px 0 12px; }
  #view-analise.empty-mode { justify-content: flex-start; min-height: auto; }
  #view-analise.empty-mode .hero { margin-top: 4px; }
  .dropzone { padding: 24px 18px; }
  .filters { gap: 10px; }
  .filters .f, .filters select { width: 100%; }
  .myth-picker { padding: 12px; gap: 14px; }
  .myth-filters { gap: 14px; }
  /* os três eixos voltam a empilhar; cada um vira uma FAIXA que rola na horizontal —
     em coluna, os 13 chips ocupariam ~10 linhas e empurrariam tudo para fora da tela.
     O chip cortado na borda é a afordância; o chip ligado é trazido à vista pelo JS
     (renderMythChips). O corpo da página não rola na horizontal (o scroll é do container). */
  .chip-axes { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  /* I20 — os três eixos colapsam numa barra com CONTADOR. Fechada, a barra ainda diz
     quantos eixos filtram; sem esse número o filtro ficaria ativo e invisível, que é pior
     do que a faixa comprida que ela substitui. A regra de esconder tem especificidade
     maior que `.chip-axes` de propósito: ordem no arquivo não pode decidir isto. */
  .mf-toggle {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
    padding: 8px 14px; margin-top: 14px;
  }
  .mf-toggle:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .mf-toggle .mf-toggle-ic svg { display: block; width: 15px; height: 15px; color: var(--text-2); }
  .mf-toggle .mf-toggle-n {
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .mf-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .myth-filters.chips-fechados .chip-axes { display: none; }
  /* com a barra logo acima, o fio de cima do bloco de chips viraria linha dupla */
  .myth-filters .chip-axes { border-top: 0; padding-top: 4px; }
  /* a busca toma a 1ª linha com a contagem; o "Limpar" desce e vai para a direita, sob a
     contagem — solto à esquerda ele ficava órfão no meio do painel */
  .mf-search { flex-basis: 180px; }
  .myth-picker .f-clear { margin-left: auto; }
  .chip-row { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; width: auto; }
  .myth-options { grid-template-columns: 1fr; }
  .verdict { padding: 16px 17px; }
  .verdict-headline { font-size: 19px; }
  .verdict-points, .support-grid { grid-template-columns: 1fr; }
  .verdict-points { gap: 7px; margin-top: 13px; }
  .verdict-points li {
    border: 0; background: transparent; padding: 0 0 0 17px;
    font-size: 13px; line-height: 1.38;
  }
  .verdict-points li::before { left: 1px; top: .55em; }
  .myth-card { padding: 14px 15px; }
  .course-strip small { width: 100%; margin-left: 0; }
  .course-layout, .course-lesson-grid, .course-bottom-grid { grid-template-columns: 1fr; }
  .course-module-intro, .course-example-grid, .course-apply-grid.two, .course-section-check ul, .compare-viz, .risk-viz, .apply-viz { grid-template-columns: 1fr; }
  .course-module-intro .course-tags { justify-content: flex-start; }
  .course-section-nav { grid-template-columns: 1fr 1fr; }
  .course-section-nav button { min-height: 62px; padding: 8px; font-size: 12px; }
  .course-modules { display: grid; grid-template-columns: 1fr; }
  .course-panel { padding: 15px; }
  .course-panel h2 { font-size: 20px; }
  .course-track { grid-template-columns: 1fr 1fr; }
  .course-visual { min-height: 190px; }
  .spin-viz { grid-template-columns: 1fr; }
  .spin-arrow { transform: rotate(90deg); }
  .result-viz { font-size: 11px; gap: 4px; }
  .result-viz > * { padding: 7px 5px; }
  .cohort-viz { grid-template-columns: 1fr; }
  .cohort-viz div { width: 2px; height: 14px; margin: 0 auto; }
  .synthesis-viz, .body-viz, .pico-viz, .conclusion-viz { grid-template-columns: 1fr; }
  .bars-viz div { height: 125px; }
  .design-viz { flex-wrap: wrap; justify-content: center; align-content: center; }
  .design-viz::before { display: none; }
  .f-clear { margin-left: 0; }
  h1.hero { font-size: 23px; }
  .sub { font-size: 14px; margin-bottom: 18px; }
  .search { flex-direction: column; align-items: stretch; padding: 12px; }
  .search button { width: 100%; padding: 12px; }
  .card { padding: 16px; }
  .card .meta { gap: 6px 10px; }
  .site-foot { flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 28px; }
}