/* IAJUS : páginas "Saiba mais" (conceitos). Importa os tokens visuais globais
   (../styles.css) e adiciona só o que é específico das páginas de conceito:
   o simulador de busca, o fluxo passo a passo e os contadores do corpus.
   Identidade Direção C (Asterisco de Origem), acento ouro #c9a227.
   Tudo degrada para estático sob prefers-reduced-motion.

   Regras de copy herdadas do programa front: sem travessão; nunca quebrar
   palavra ou letra (hyphens:none; overflow resolvido por layout). */

/* ---------------------------------------------------------------------------
   Tokens locais (derivados dos globais; nenhum nome global é redefinido)
   --------------------------------------------------------------------------- */
:root {
  --c-lexical: #57a8e0;     /* azul : busca por palavra-chave */
  --c-semantic: #4fbf96;    /* verde : busca por significado */
  --c-hybrid: #b89244;      /* champanhe : fusão dos dois (acento da marca; sync c/ brand-tokens --gold) */
  --c-panel: rgba(255, 255, 255, 0.035);
  --c-panel-strong: rgba(255, 255, 255, 0.06);
}

/* Light mode: the accents above are tuned for the dark ground; used as FOREGROUND
   text/border on the search simulator toggles and result highlights they would fail
   WCAG AA on the cream paper, so deepen them (mirroring the global light tokens in
   ../styles.css). The white-alpha panels also flip to a dark-alpha tint so the
   simulator surfaces stay visible on cream.
   NOTE: uses :root[data-theme='light'] (specificity 0,2,0) not the bare attribute
   selector — the local :root above defines these same tokens, so the override must
   out-rank it deterministically regardless of sheet/source order.

   ⛔ --c-semantic e --c-hybrid ainda nasciam ABAIXO de AA como TEXTO sobre o
   canvas real onde `.compare-card .tag` (e `.analogy b`) realmente pousam:
   --c-panel claro (ink a 4%) composto sobre --bg (#faf8f2) = #f1efea, NUNCA
   #faf8f2 puro — a variavel nao existe isolada em nenhum CSS, so nasce composta
   em runtime. Medido neste ficheiro (mesmo compositor de saas/landing/spec/
   light-theme-token-aa-guard.test.js):
     --c-semantic #15803d sobre #f1efea = 4.374:1  (REPROVA AA 4,5:1)
     --c-hybrid   #8a6d1a sobre #f1efea = 4.276:1  (REPROVA)
   Achado por sweep BR completo (axe-core, color-contrast) em
   conceitos/o-corpus.html e conceitos/tipos-de-busca.html, os UNICOS 5 nos com
   violacao AA de toda a landing BR (tema escuro: zero).
     --c-semantic -> #166534 (green-800, o MESMO passo que --ok deste repo ja
       usa para o identico problema — verde em creme): 6.219:1, margem +1.719.
     --c-hybrid -> var(--gold, #765d16): 5.471:1, margem +0.971. O comentario
       antigo ja dizia "== --gold do tema claro", so que --gold foi escurecido
       para #765d16 num commit anterior (ver ../styles.css, "AA 4.5:1 as text
       on cream") e --c-hybrid nunca acompanhou — um comentario que afirma uma
       paridade que parou de valer engana o proximo leitor a nao conferir. Em
       vez de copiar o hex de novo (e voltar a poder divergir), agora referencia
       var(--gold) direto: a paridade fica estrutural, nao promessa de comentario.
   --c-lexical (#2d5a96) ja clareava com folga (6.076:1) e continua igual.
   Guard: saas/landing/spec/light-theme-token-aa-guard.test.js. */
:root[data-theme='light'] {
  --c-lexical: #2d5a96;     /* azul mais escuro para AA no creme */
  --c-semantic: #166534;    /* verde mais escuro para AA no creme (green-800; era #15803d = 4.37:1, REPROVA) */
  --c-hybrid: var(--gold, #765d16); /* espelha --gold do tema claro (era #8a6d1a hardcoded = 4.28:1, REPROVA) */
  --c-panel: rgba(26, 31, 46, 0.04);
  --c-panel-strong: rgba(26, 31, 46, 0.07);
}

/* Never break words mid-letter anywhere in concept prose. */
.concept-page,
.concept-page p,
.concept-page li,
.concept-page h1,
.concept-page h2,
.concept-page h3 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* ---------------------------------------------------------------------------
   Hub : breadcrumb-ish page head shared across the three concept pages
   --------------------------------------------------------------------------- */
.concept-head { padding-block: clamp(36px, 6vw, 64px) clamp(16px, 3vw, 28px); }
.concept-head .back {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.76rem; color: var(--text-secondary); text-decoration: none;
  letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--hair); border-radius: var(--radius-pill);
  background: var(--card);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.concept-head .back svg { width: 16px; height: 16px; flex: none; }
.concept-head .back:hover {
  color: var(--gold-bright); border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--card));
}
.concept-head .back:focus-visible {
  outline: var(--focus-ring); outline-offset: var(--focus-ring-offset);
  box-shadow: var(--focus-halo);
}
.concept-head h1 {
  font-size: clamp(2rem, 1.35rem + 3vw, 3.4rem);
  line-height: 1.08; margin: 18px 0 14px; max-width: 18ch;
}
.concept-head h1 .hl { color: var(--gold); }
.concept-head .lede { max-width: 58ch; }

/* Generic content rhythm */
.concept-section { padding-block: clamp(26px, 4vw, 44px); }
.concept-section > .sec-head { margin-bottom: clamp(18px, 3vw, 28px); }
/* Escala local de H2 nas páginas de conceito: o --step-h2 global foi dimensionado
   para o index (onde o H1 vai a 5rem); aqui o H1 vai só a 3,4rem, então herdar
   --step-h2 achata a razão H1:H2 para ~1,1. Escala própria devolve o eixo
   editorial (razão ~1,4-1,5 em toda a faixa). */
.concept-section h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem); line-height: 1.12; }
.concept-prose { max-width: 64ch; }
.concept-prose p + p { margin-top: 0.9em; }
.concept-prose strong { color: var(--ink); font-weight: 600; }
/* Nota discreta de marca do OJBU no card de ontologia (tipos-de-busca). */
.ojbu-tm { margin-top: 10px; font-size: 0.76rem; line-height: 1.4; color: var(--text-secondary); }

/* ===========================================================================
   1) SIMULADOR DE BUSCA  (página tipos-de-busca)
   =========================================================================== */
.sim {
  border: 1px solid var(--hair);
  background:
    radial-gradient(120% 140% at 8% -10%, rgba(184,146,68,0.07), transparent 55%),
    var(--c-panel);
  border-radius: 20px;
  padding: clamp(18px, 3vw, 30px);
  position: relative;
  overflow: hidden;
}
.sim::before {
  /* fine ledger rule down the left, echoing the global atmosphere */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(184,146,68,0.14), transparent 2px);
  background-repeat: no-repeat; background-size: 2px 100%;
  opacity: 0.5;
}
.sim > * { position: relative; }

/* Mode toggle : the three search "kinds" */
.sim-modes {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.sim-mode {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  min-width: 0;
}
.sim-mode .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: currentColor; opacity: 0.85;
}
.sim-mode[data-mode="lexical"]  { color: var(--text-secondary); }
.sim-mode[data-mode="lexical"].is-active  { color: var(--c-lexical);  border-color: var(--c-lexical);  background: rgba(87,168,224,0.10); }
.sim-mode[data-mode="semantic"].is-active { color: var(--c-semantic); border-color: var(--c-semantic); background: rgba(79,191,150,0.10); }
.sim-mode[data-mode="hybrid"].is-active   { color: var(--c-hybrid);   border-color: var(--c-hybrid);   background: rgba(184,146,68,0.12); }
.sim-mode:hover { border-color: var(--rule); color: var(--ink-soft); }
.sim-mode:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* What each mode means, one line, swapped live */
.sim-mode-explain {
  font-size: 0.92rem; color: var(--text-secondary);
  min-height: 2.8em; margin-bottom: 14px; line-height: 1.5; max-width: 72ch;
}
.sim-mode-explain b { color: var(--ink); font-weight: 600; }

/* Declaração de que o painel é um retrato gravado, DENTRO do painel e antes dos
   resultados: o rodapé .sim-note já dizia isto, mas só depois de o visitante ter
   lido o traço animado ("Procurando no acervo"), que sozinho sugere busca ao vivo.
   Ruling do operador 2026-07-25: simulação pode, desde que declarada. */
.sim-gravado {
  font-size: 0.84rem; color: var(--text-tertiary); line-height: 1.5;
  max-width: 72ch; margin: 0 0 14px;
  border-left: 3px solid var(--hair); padding-left: 12px;
}
.sim-gravado strong { color: var(--ink-soft); font-weight: 600; }

/* Search field (fake : zero network) */
.sim-bar {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
}
.sim-input-wrap {
  flex: 1 1 260px; min-width: 0; position: relative;
  display: flex; align-items: center;
}
.sim-input-wrap svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted-2); pointer-events: none; }
.sim-input {
  width: 100%; min-width: 0;
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 1rem;
  color: var(--ink); background: rgba(0,0,0,0.22);
  border: 1px solid var(--field-border); border-radius: 12px;
  padding: 14px 14px 14px 42px;
  transition: border-color .2s ease;
}
.sim-input::placeholder { color: var(--muted-2); }
.sim-input:focus { border-color: var(--gold); }
/* WCAG 2.4.7: sem `outline: none` em todo foco — o anel por tokens aparece no
   foco de teclado (:focus-visible), mesmo padrão do .concept-head .back acima
   (:68-71) e dos irmãos em ../styles.css (:471-478). */
.sim-input:focus-visible {
  outline: var(--focus-ring); outline-offset: var(--focus-ring-offset);
  box-shadow: var(--focus-halo);
}
/* Light theme: the hardcoded dark `rgba(0,0,0,0.22)` field fill composites to a
   grey box on cream, dropping the --muted-2 placeholder to ~3.25:1 (FAIL AA).
   Repaint to a white field (mirrors ../styles.css + saas/admin) so the placeholder
   clears AA (~5.8:1) and the demo bar reads native to the light surface. */
:root[data-theme='light'] .sim-input,
:root[data-theme='light'] .sim-query { background: #fff; color-scheme: light; }
/* Mesma classe de bug para os demais fills escuros hardcoded do conceitos (só
   .sim-input/.sim-query estavam cobertos): no creme o rgba(0,0,0,0.22)/0.18
   compõe cinza e derruba o texto (--text-secondary ~3,8:1, --gold-bright ~3,9:1,
   ambos FAIL AA). Com fundo branco, #555b6b sobe a ~5,8:1 e #6f570f a ~6,3:1. */
:root[data-theme='light'] .flow-chip,
:root[data-theme='light'] .aux-code,
:root[data-theme='light'] .ask-bubble { background: #fff; }
:root[data-theme='light'] .ask-line.a .ask-bubble { background: color-mix(in srgb, var(--gold) 7%, #fff); }

/* Selected-question echo (the simulator runs off real demo questions, so there is
   no free-text field — the chosen question is shown read-only in the search bar). */
.sim-query {
  display: block; width: 100%; min-width: 0;
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 1rem;
  color: var(--ink); background: rgba(0,0,0,0.22);
  border: 1px solid var(--hair); border-radius: 12px;
  padding: 14px 14px 14px 42px;
  line-height: 1.4; overflow-wrap: normal; word-break: normal;
}
.sim.is-loading .sim-query { color: var(--muted-2); }
.sim-go {
  /* A1 (design plan 2026-07-02): ouro-de-SUPERFÍCIE theme-invariant. var(--gold)
     flipava para #765d16 no claro → texto #1c1917 a ~2,7:1 (FAIL AA). --btn-gold-hi
     não flipa: tinta #1c1917 = 9,2:1, AA nos dois temas sem media query. */
  flex: none;
  font-family: 'Public Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.95rem;
  color: #1c1917; background: var(--btn-gold-hi);
  border: 0; border-radius: 12px; padding: 14px 22px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.sim-go:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -16px rgba(184,146,68,0.7); }
.sim-go:active { transform: translateY(0); }
.sim-go:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.sim-go .spin { width: 16px; height: 16px; flex: none; display: none; }
.sim.is-running .sim-go .spin { display: inline-block; animation: sim-spin 0.8s linear infinite; }
.sim.is-running .sim-go .go-label { opacity: 0.7; }
@keyframes sim-spin { to { transform: rotate(360deg); } }

/* Suggested example queries */
.sim-suggest {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.sim-suggest .label {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2);
}
.sim-chip {
  font-size: 0.82rem; color: var(--text-secondary);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hair);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.sim-chip:hover { color: var(--gold); border-color: var(--rule); }
.sim-chip:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* The "engine working" trace : a few animated steps */
.sim-trace {
  margin-top: 20px; border-top: 1px solid var(--hair); padding-top: 18px;
  display: none;
}
.sim.is-running .sim-trace, .sim.has-results .sim-trace { display: block; }
.sim-trace-step {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.8rem;
  color: var(--muted-2); padding: 5px 0; opacity: 0.35;
  transition: opacity .3s ease, color .3s ease;
}
.sim-trace-step.is-on { opacity: 1; color: var(--text-secondary); }
.sim-trace-step .tick {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center;
}
/* A1: tick concluído = mesma superfície theme-invariant do .sim-go (check #1c1917
   sobre var(--gold)=#765d16 no claro dava 2,7:1, abaixo do 3:1 gráfico). */
.sim-trace-step.is-done .tick { background: var(--btn-gold-hi); border-color: var(--btn-gold-hi); color: #1c1917; }
.sim-trace-step .tick svg { width: 10px; height: 10px; opacity: 0; transition: opacity .2s; }
.sim-trace-step.is-done .tick svg { opacity: 1; }

/* Results */
.sim-results { margin-top: 18px; display: grid; gap: 12px; }
.sim-results-head {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.74rem;
  letter-spacing: 0.05em; color: var(--muted-2);
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
}
.sim-results-head b { color: var(--ink); }
/* Honest "where is this reachable" badge in the results header. */
.sim-results-head .sim-selo {
  flex-basis: 100%;
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 0.74rem;
  letter-spacing: 0; text-transform: none; color: var(--text-tertiary);
  line-height: 1.4;
}
/* Per-tema / per-mode explanation pulled from conceitos_demo.json (build copy). */
.sim-modal-note {
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55;
  border-left: 3px solid var(--mode-color, var(--gold));
  padding: 2px 0 2px 13px; margin: 2px 0 4px; max-width: 72ch;
}
.sim-result .sim-meta {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.74rem;
  color: var(--text-tertiary); margin-bottom: 6px;
}
.sim-result {
  border: 1px solid var(--hair); border-left: 3px solid var(--mode-color, var(--gold));
  background: var(--c-panel); border-radius: 12px;
  padding: 16px 18px;
  opacity: 0; transform: translateY(10px);
}
.sim.show-results .sim-result {
  animation: sim-pop .5s cubic-bezier(.22,.61,.36,1) forwards;
}
.sim.show-results .sim-result:nth-child(2) { animation-delay: .08s; }
.sim.show-results .sim-result:nth-child(3) { animation-delay: .16s; }
.sim.show-results .sim-result:nth-child(4) { animation-delay: .24s; }
@keyframes sim-pop { to { opacity: 1; transform: none; } }
.sim-result-top {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin-bottom: 8px;
}
.sim-badge {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mode-color, var(--gold));
  border: 1px solid currentColor; border-radius: 6px; padding: 2px 8px;
}
.sim-orgao {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.72rem;
  color: var(--text-tertiary);
}
.sim-why {
  margin-left: auto; font-size: 0.72rem; color: var(--text-secondary);
  background: rgba(255,255,255,0.03); border-radius: 999px; padding: 3px 11px;
}
.sim-result h3 { font-size: 1.04rem; line-height: 1.35; margin-bottom: 6px; color: var(--ink); }
.sim-result p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; max-width: 78ch; }
/* O highlight acompanha o modo ativo (--mode-color) em vez do dourado fixo: no
   'palavra-chave' o termo azul sobre pílula dourada misturava acentos que o resto
   do painel (borda/badge/nota) evita. O MODO continua no texto; a PÍLULA nao.
   ⛔ Era `background: color-mix(in srgb, var(--mode-color) 12%, transparent)` — a
   pílula era um tinte da PRÓPRIA matiz do texto, e isso come contraste por
   construção: escurecer o termo escurece também o fundo dele, e o ganho anula-se.
   Medido com o compositor de chapas (pior ponto, nao a média) a 2026-08-21, nas
   SEIS combinações tema x modo: claro/híbrido 4,20 (5 nós REPROVAM), claro/lexical
   4,62, claro/semântico 4,71, escuro/híbrido 4,03 (5 REPROVAM), escuro/lexical
   4,43 (1 REPROVA), escuro/semântico 4,97. Onze estados abaixo de AA, e os tres
   restantes passavam por menos de +0,25.
   O conserto é ESTRUTURAL: a pílula deixa de derivar da matiz do texto e passa ao
   par que este mesmo ficheiro ja usa para os outros fills (.sim-input/.sim-query/
   .flow-chip/.aux-code/.ask-bubble): poço escuro rgba(0,0,0,0.22) por omissão,
   repintado a papel branco no tema claro. A pílula move-se SEMPRE no sentido
   contrário à luminância do texto, nunca na mesma. Depois: pior das seis
   combinações 5,47 (escuro/híbrido), melhor 7,13, e no claro a chapa fica OPACA
   (distinctBg=1), logo nenhuma mudanca de fundo a jusante a pode desarmar.
   Vigia: spec/match-pilula-nao-tinge-com-a-propria-matiz.test.js */
.sim-result .match { color: var(--mode-color, var(--gold)); font-weight: 600; background: rgba(0,0,0,0.22); border-radius: 4px; padding: 0 3px; }
:root[data-theme='light'] .sim-result .match { background: #fff; }
.sim-result-foot {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
}
.sim-source {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.78rem;
  color: var(--gold); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.sim-source:hover { border-bottom-color: var(--gold); color: var(--gold-bright); }
.sim-empty {
  font-size: 0.9rem; color: var(--text-secondary);
  border: 1px dashed var(--hair); border-radius: 12px; padding: 16px 18px;
}
.sim-empty b { color: var(--ink); }

/* The "miss vs hit" teaching callout under results */
.sim-lesson {
  margin-top: 16px; border-radius: 12px; padding: 14px 16px;
  background: rgba(184,146,68,0.06); border: 1px solid var(--rule);
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; max-width: 72ch;
  display: none;
}
.sim.has-results .sim-lesson { display: block; }
.sim-lesson b { color: var(--gold); }

/* Fixed honesty note under the simulator: it is a build-time snapshot, not live. */
.sim-note {
  margin-top: 16px; font-size: 0.86rem; color: var(--text-tertiary);
  line-height: 1.6; max-width: 72ch;
  border-top: 1px dashed var(--hair); padding-top: 14px;
}
.sim-note strong { color: var(--ink-soft); font-weight: 600; }

/* ===========================================================================
   1b) AUXILIARY MODALITY CARDS (estruturada/jurimetria, ontologia, CNJ)
   Sober explainer cards — not part of the 3-button simulator.
   =========================================================================== */
.aux-card {
  border: 1px solid var(--hair); border-radius: 16px; padding: 22px;
  background: var(--c-panel); position: relative; overflow: hidden;
}
.aux-card .aux-k {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 10px;
}
.aux-card h3 { font-size: 1.08rem; color: var(--ink); margin-bottom: 8px; }
.aux-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }
.aux-card .aux-selo {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hair);
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.72rem;
  color: var(--text-tertiary); display: flex; align-items: center; gap: 8px;
  line-height: 1.4;
}
.aux-card .aux-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c-semantic);
}
.aux-card .aux-dot.mcp { background: var(--c-hybrid); }
.aux-code {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.84em;
  color: var(--ink-soft); background: rgba(0,0,0,0.22);
  border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px;
  overflow-wrap: normal; word-break: normal;
}

/* ===========================================================================
   2) SIDE-BY-SIDE COMPARISON CARDS (lexical vs semantic visual)
   =========================================================================== */
.compare-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.compare-card {
  border: 1px solid var(--hair); border-radius: 16px; padding: 22px;
  background: var(--c-panel); position: relative; overflow: hidden;
}
.compare-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--gold));
}
.compare-card.lex  { --accent: var(--c-lexical); }
.compare-card.sem  { --accent: var(--c-semantic); }
.compare-card.hyb  { --accent: var(--c-hybrid); }
.compare-card h3 {
  font-size: 1.1rem; color: var(--ink); margin-bottom: 6px;
  display: flex; align-items: center; gap: 9px;
}
.compare-card h3 .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); flex: none; }
.compare-card .tag {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px; display: block;
}
.compare-card p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; }
.compare-card p + p { margin-top: 10px; }
/* The juridical analogy : the lawyer-familiar image that LEADS each card,
   before the technical explanation. Tinted by the card accent, slightly larger. */
.compare-card .analogy {
  font-size: 0.96rem; color: var(--text-primary); line-height: 1.55;
  border-left: 3px solid var(--accent); padding: 2px 0 2px 13px;
  margin-bottom: 12px;
}
.compare-card .analogy b { color: var(--accent); font-weight: 600; }
.compare-card .eg {
  margin-top: 14px; font-size: 0.84rem; color: var(--text-tertiary);
  border-top: 1px dashed var(--hair); padding-top: 12px;
}
.compare-card .eg b { color: var(--ink-soft); font-weight: 600; }

/* ===========================================================================
   3) FLOW STEPS (página como-a-ia-encontra)
   =========================================================================== */
.flow {
  display: grid; gap: 0;
  position: relative;
}
.flow-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 18px 0;
  position: relative;
}
.flow-step:not(:last-child)::before {
  /* connector line down the gutter */
  content: ""; position: absolute; left: 27px; top: 56px; bottom: -18px; width: 2px;
  background: linear-gradient(180deg, var(--rule), rgba(184,146,68,0.05));
}
.flow-num {
  width: 54px; height: 54px; flex: none; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.4rem;
  color: var(--gold); background: rgba(184,146,68,0.08);
  border: 1px solid var(--rule); position: relative; z-index: 1;
}
.flow-body h3 { font-size: 1.16rem; color: var(--ink); margin-bottom: 6px; }
.flow-body p { font-size: 0.96rem; color: var(--text-secondary); line-height: 1.6; max-width: 56ch; }
/* Juridical analogy : the lawyer-familiar image that leads each step before the
   technical explanation. Italic, gold-tinted, set apart from the body copy. */
.flow-body .flow-analogy {
  font-style: italic; color: var(--gold-bright); font-size: 0.94rem;
  margin-bottom: 8px;
}
.flow-body .flow-analogy + p { margin-top: 0; }
.flow-chip {
  display: inline-block; margin-top: 12px;
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.8rem;
  color: var(--text-secondary); background: rgba(0,0,0,0.22);
  border: 1px solid var(--hair); border-radius: 8px; padding: 9px 13px;
  max-width: 100%; overflow-wrap: normal; word-break: normal; /* never split a word */
}
.flow-chip.is-answer { color: var(--gold-bright); border-color: var(--rule); }
.flow-chip .src { color: var(--gold); }

/* Animated "type the question" demo at the top of the flow page */
.ask-demo {
  border: 1px solid var(--hair); border-radius: 16px;
  background: var(--c-panel); padding: clamp(18px, 3vw, 26px);
}
.ask-line {
  display: flex; align-items: flex-start; gap: 12px; padding: 8px 0;
  opacity: 0; transform: translateY(8px);
}
.ask-demo.run .ask-line.in { animation: sim-pop .5s ease forwards; }
.ask-role {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; flex: none;
  width: 70px; padding-top: 3px;
}
.ask-line.q .ask-role { color: var(--text-tertiary); }
.ask-line.a .ask-role { color: var(--gold); }
.ask-bubble {
  flex: 1 1 auto; min-width: 0; max-width: 62ch;
  font-size: 0.96rem; line-height: 1.55; color: var(--text-primary);
  background: rgba(0,0,0,0.18); border: 1px solid var(--hair);
  border-radius: 12px; padding: 12px 15px;
}
.ask-line.a .ask-bubble { background: rgba(184,146,68,0.06); border-color: var(--rule); }
.ask-bubble .cite {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--hair);
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.78rem;
}
.ask-bubble .cite a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ask-bubble .cite a:hover { border-bottom-color: var(--gold); }
.ask-replay {
  margin-top: 14px;
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.8rem;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--hair); border-radius: 10px; padding: 9px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s, border-color .2s;
}
.ask-replay:hover { color: var(--gold); border-color: var(--rule); }
.ask-replay:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ===========================================================================
   4) CORPUS PAGE : live counters (hydrated by ../stats.js)
   =========================================================================== */
.metric-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.metric {
  border: 1px solid var(--hair); border-radius: 16px; padding: 22px;
  background: var(--c-panel); text-align: left;
  container-type: inline-size;
}
.metric .num {
  /* Alinha ao KIT 'mono = dado' (idêntico ao .stat-tile__num, mesmo clamp): os
     números de display estavam em Public Sans 700 enquanto a seção 05 da mesma
     página usa Fira Code 600 — duas vozes tipográficas para o mesmo papel. Lora
     fica reservado ao monumento único do hero do index. */
  font-family: 'Fira Code', ui-monospace, monospace; font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); line-height: 1;
  /* #91/#108 K1: com o contador HIDRATADO, «33.114.162» não cabia no cartão — medido
     em 2026-09-23, +49 px além da caixa a 1440 e +57 px a 768 (quatro colunas nas duas
     larguras). A escala acima continua a ser o TETO; o cartão (container) só a reduz
     quando o número não cabe. Motor sem container queries descarta esta linha inteira
     e fica com a de cima. */
  font-size: min(clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem), 14cqi);
  color: var(--gold); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.metric .label { margin-top: 10px; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.45; }
.metric .sub { margin-top: 4px; font-size: 0.78rem; color: var(--text-tertiary); font-family: 'Fira Code', ui-monospace, monospace; }

/* #91/#108 K1: o contador sem medição diz a PALAVRA, e ela não se lê como figura:
   corpo 1rem, itálico, tinta terciária, sem quebrar o grid (auditoria pública §4).
   `.metric .num` (0,2,0) vence o `.v--indisponivel` global (0,1,0) em cor, fonte e
   tamanho — daí o seletor composto. Cobre também a frase de soma ausente que
   `stats.js::marcarSomaAusente` escreve no contador de acórdãos. */
.metric .num.v--indisponivel {
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 1rem; line-height: 1.35;
  font-style: italic; font-weight: 400; letter-spacing: 0;
  color: var(--text-tertiary);
}

/* ===========================================================================
   Shared : "explore more" hub links + CTA seal (reuses global .notify)
   =========================================================================== */
.more-grid {
  display: grid; gap: 14px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.more-card {
  border: 1px solid var(--hair); border-radius: 16px; padding: 22px;
  background: var(--c-panel); text-decoration: none; color: inherit;
  display: block; transition: border-color .2s, transform .2s, background .2s;
}
.more-card:hover { border-color: var(--rule); transform: translateY(-2px); background: var(--c-panel-strong); }
.more-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.more-card .k {
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2);
}
.more-card h3 { font-size: 1.1rem; color: var(--ink); margin: 8px 0 6px; }
.more-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.more-card .go { margin-top: 12px; color: var(--gold); font-size: 0.86rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------------------
   Reduced motion : everything resolves to its final, static state
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sim.is-running .sim-go .spin { animation: none; }
  .sim .sim-result { opacity: 1; transform: none; animation: none; }
  .ask-demo .ask-line { opacity: 1; transform: none; animation: none; }
  .sim-trace-step { opacity: 1; color: var(--text-secondary); }
}

/* ---------------------------------------------------------------------------
   Narrow screens : keep the simulator and flow readable down to 320px
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .sim-bar { flex-direction: column; }
  .sim-go { width: 100%; justify-content: center; }
  .sim-why { margin-left: 0; }
  .flow-step { grid-template-columns: 44px 1fr; gap: 13px; }
  .flow-num { width: 44px; height: 44px; font-size: 1.15rem; }
  .flow-step:not(:last-child)::before { left: 22px; top: 46px; }
  .ask-role { width: 56px; }
}

/* ---------------------------------------------------------------------------
   KIT bridge (additive) : the shared visual-component KIT lives in
   ../styles.css (loaded first), so .stat-tile / .coverage-bar / .compare-table
   / .chip-row / .platform-chip / .proof-card--pass / .kit-icon are already
   available here. These helpers only recolor the shared .coverage-bar fill
   with the conceitos semantic palette via the --bar-fill custom property; no
   KIT selector is redefined. Usage : <div class="coverage-bar fill-lexical"
   role="meter" … style="--pct:60">…</div>. .kit-icon also accepts the same
   recolor for inline icons that key off a search mode. */
.coverage-bar.fill-lexical  { --bar-fill: var(--c-lexical); }
.coverage-bar.fill-semantic { --bar-fill: var(--c-semantic); }
.coverage-bar.fill-hybrid   { --bar-fill: var(--c-hybrid); }
.kit-icon.is-lexical  { stroke: var(--c-lexical); }
.kit-icon.is-semantic { stroke: var(--c-semantic); }
.kit-icon.is-hybrid   { stroke: var(--c-hybrid); }

/* ---------------------------------------------------------------------------
   OJBU "three levels" explainer (corpus page) : ramo -> sub-area -> materia,
   each with its count and a concrete example, so OJBU is grasped at a glance.
   --------------------------------------------------------------------------- */
.ojbu-levels { margin-top: 26px; }
.ojbu-intro { color: var(--ink-soft); max-width: 62ch; margin: 0 0 18px; }
.ojbu-intro b { color: var(--gold); font-weight: 700; letter-spacing: 0.02em; }
.ojbu-chain {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px; grid-template-columns: 1fr;
  counter-reset: ojbu;
}
@media (min-width: 720px) { .ojbu-chain { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.ojbu-step {
  position: relative;
  background: var(--c-panel); border: 1px solid var(--hair);
  border-radius: 14px; padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.ojbu-step::before {
  counter-increment: ojbu; content: counter(ojbu);
  position: absolute; top: 14px; right: 15px;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.7rem; color: var(--muted-2);
}
/* connector chevron between steps, desktop only */
@media (min-width: 720px) {
  .ojbu-step:not(:last-child)::after {
    content: '\203A'; position: absolute; right: -18px; top: 50%;
    transform: translateY(-50%); color: var(--gold);
    font-size: 1.5rem; line-height: 1;
  }
}
.ojbu-step__lvl {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold); font-weight: 700;
}
.ojbu-step__count { font-size: 0.84rem; color: var(--muted); }
.ojbu-step__ex { font-size: 1.04rem; color: var(--ink); font-weight: 600; margin-top: 2px; }
.ojbu-foot { margin: 16px 0 0; color: var(--muted); max-width: 64ch; font-size: 0.92rem; }

/* ---------------------------------------------------------------------------
   compare-table no MOBILE (<=560px): a tabela de 3 colunas de prosa (Busca /
   Como funciona / Boa para) tinha white-space:nowrap na 1a coluna e sobrava
   ~6-7ch por coluna a 390px — as palavras quebravam letra a letra. Aqui ela
   empilha como cartões: o th[scope=row] vira o título e cada td ganha um rótulo
   de coluna via ::before. Acima de 560px segue a tabela normal (styles.css).
   --------------------------------------------------------------------------- */
/* Moldura reutilizável da tabela (substitui o wrapper com border/radius/overflow
   inline): rola na horizontal em vez de clipar, se a tabela exceder a caixa. */
.table-frame { border: 1px solid var(--hair); border-radius: 16px; overflow: hidden;
  margin-bottom: 22px; }
@media (max-width: 560px) {
  .compare-table thead { position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th,
  .compare-table td { display: block; width: auto; }
  .compare-table tr { padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .compare-table tr:last-child { border-bottom: 0; }
  .compare-table th[scope="row"] { white-space: normal; padding: 0 0 8px;
    font-size: 1rem; border-bottom: 0; }
  .compare-table td { padding: 2px 0; border-bottom: 0; font-size: 0.92rem; }
  .compare-table td::before {
    content: attr(data-label); display: block;
    font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.68rem;
    letter-spacing: var(--track-label, 0.1em); text-transform: uppercase;
    color: var(--text-tertiary); margin-bottom: 2px;
  }
}

/* CONC-04: alvos de toque >=44px (WCAG 2.5.5) para os controles do simulador
   e do replay em dispositivos de toque. Inclui os links pequenos reais: a fonte
   'Inteiro teor' de cada resultado (o clique mais importante), o 'Voltar' do
   cabeçalho e o link da citação no ask-demo (antes abaixo até do mínimo 24px). */
@media (pointer: coarse) {
  .sim-mode, .sim-chip, .ask-replay { min-height: 44px; }
  .sim-source, .concept-head .back, .ask-bubble .cite a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* LANDCONCIDX-01 (lane landblog01, Issue iajus#108 P3): índice de /conceitos.
   Só regras com tokens já servidos (brand-tokens.css/styles.css); nenhum --* novo.
   Reutiliza .sim-input/.sim-input-wrap (campo) e .legis-cards/.legis-card (cartões).
   O dl empilha a 390 e põe termo à esquerda/definição à direita >=768
   (PROP-LAND-CONCIDX-01). Sem transbordo: tudo minmax(0,1fr)/min-width:0. */
.cx-controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 20px 0 8px; }
.cx-controles .sim-input-wrap { flex: 1 1 240px; }
.cx-limpar { min-height: 44px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--hair); background: transparent; color: var(--muted);
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 0.95rem;
  cursor: pointer; }
.cx-limpar:hover { color: var(--ink); border-color: var(--rule); }
.cx-limpar:focus-visible { outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset); }
.cx-limpar[hidden] { display: none; }
.cx-ordenar { display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 0.9rem; min-height: 44px; }
.cx-ordenar select { min-height: 44px; font-family: 'Public Sans', system-ui,
  sans-serif; font-size: 0.95rem; color: var(--ink);
  background: rgba(0,0,0,0.22); border: 1px solid var(--hair);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.cx-ordenar select:focus-visible { outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset); border-color: var(--gold); }
:root[data-theme='light'] .cx-ordenar select { background: #fff;
  color-scheme: light; }
.cx-contagem { font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 4px 0 12px; }
.cx-glossario { margin: 0; border: 1px solid var(--hair); border-radius: 16px;
  background: var(--c-panel); overflow: hidden; }
.cx-termo { display: grid; grid-template-columns: minmax(10rem, 14rem)
  minmax(0, 1fr); gap: 8px 20px; padding: 14px 18px;
  border-bottom: 1px solid var(--hair); scroll-margin-top: 84px; }
.cx-termo:last-child { border-bottom: 0; }
.cx-termo[hidden] { display: none; }
.cx-termo dt { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cx-termo dt:target { color: var(--gold-bright); }
.cx-termo dd { margin: 0; color: var(--ink-soft); font-size: 0.95rem;
  line-height: 1.6; }
@media (max-width: 767px) {
  .cx-termo { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.cx-vazio { padding: clamp(40px, 7vw, 64px) 24px; text-align: center;
  border: 1px dashed var(--rule); border-radius: 16px; background: var(--card);
  margin-top: 12px; }
.cx-vazio[hidden] { display: none; }
.cx-vazio h3 { font-family: 'Lora', Georgia, serif; font-weight: 500;
  font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 8px; }
.cx-vazio p { max-width: 46ch; margin: 0 auto; color: var(--muted); }
.cx-eco { color: var(--ink-soft); font-style: italic;
  overflow-wrap: anywhere; }
.cx-vazio button { margin-top: 16px; min-height: 44px; padding: 10px 22px;
  border-radius: 999px; border: 1px solid var(--rule); background: transparent;
  color: var(--gold-bright); font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.85rem; cursor: pointer; }
.cx-vazio button:hover { border-color: var(--gold); color: var(--ink); }
.cx-vazio button:focus-visible { outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset); }
.cx-revisto { color: var(--muted); font-size: 0.85rem; margin-top: 12px; }
.cx-meta { color: var(--muted); font-size: 0.85rem; margin-top: 12px; }
.cx-meta time { font-variant-numeric: tabular-nums; }
.legis-card h3 a { color: inherit; text-decoration: none; }
.legis-card h3 a:hover { color: var(--gold-bright); }
.legis-card h3 a:focus-visible { outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset); }