/* ============================================================
   /precedentes-tst/ — repertório de precedentes vinculantes do TST
   Usa SÓ os tokens que /css/style.css já define (DESIGN.md: cor
   literal em componente é defeito). Serifa (--ff-accent) é a voz do
   TST; sem serifa (--ff-body) é a voz do site. Dourado só marca o
   numeral do tema e o fio entre verbetes — nunca cor de estado.

   Reescrito em 21/09/2026 (2ª rodada do portão visual do orquestrador):
   numeral grande de verdade, hero/topo compactos, campo opcional ausente
   some (não vira "não informado"), tese como maior texto corrido da
   ficha do tema com aside fixo ao lado, barra de busca encolhe ao colar,
   verbete do índice recorta por altura real (JS), e o por-assunto virou
   linha de repertório de verdade — não o verbete inteiro encolhido.
   ============================================================ */

/* ── Util ─────────────────────────────────────────────────────── */
/* Rede de segurança do atributo `hidden` (app.js filtra o índice e o
   por-assunto ligando/desligando `hidden`, nunca `innerHTML`): QUALQUER
   seletor de autor que declare `display` no mesmo elemento (ex.: `.verbete{
   display:grid}` abaixo) empata em especificidade com o `[hidden]{display:
   none}` do user-agent e, por empate, o estilo de AUTOR vence — o elemento
   fica com `hidden="true"` no DOM e continua visível na tela. Sem esta regra
   (achado ao revisar o portão visual, 21/09/2026), o filtro atualizava a
   contagem mas não escondia nada.
*/
[hidden] { display: none !important; }

/* O site inteiro liga `html { scroll-behavior: smooth }` (/css/style.css).
   Numa página comum isso é agradável; no `/precedentes-tst/por-assunto/`
   (achado ao revisar o portão visual, 21/09/2026), o documento passa de
   dezenas de milhares de pixels de altura — um clique na régua de letras ou
   no sumário levava mais de 1 segundo animando a rolagem pela tela inteira
   antes de assentar no lugar certo. Como este seletor mora DEPOIS de
   `/css/style.css` no `<head>` e tem a mesma especificidade (`html`), ele
   vence e desliga o smooth só nestas páginas. */
html { scroll-behavior: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Alvo de âncora (tema, assunto, letra) não pode ficar colado sob o
   header fixo do site nem sob a barra de busca fixa. */
[id] { scroll-margin-top: 108px; }

.dado-vazio { color: var(--text-light); font-style: normal; }

.nota-fonte {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-top: 2rem;
}
.nota-fonte a { color: var(--gold-muted); text-decoration: underline; text-underline-offset: 2px; }
.nota-fonte a:hover { color: var(--gold); }

.ver-tambem { font-size: 0.95rem; margin-top: 1rem; }
.ver-tambem a { color: var(--navy-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ver-tambem a:hover { color: var(--gold-muted); }

/* ── Caminho comercial (o checklist que a Marina vende) ───────────────────
   Bloco discreto, fechando a página — nunca no meio do texto oficial do
   TST, nunca cor nova, nunca caixa nem sombra: só os tokens que o resto da
   página já usa (`.render/oferta.mjs` monta a marcação, este é só o
   token-mapping visual). O link carrega a classe `cta-checklist-btn` (não
   um botão de verdade, ver o comentário em `oferta.mjs`), estilizado igual
   a qualquer link discreto da página. */
.cta-checklist {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.cta-checklist-texto {
  max-width: 60ch;
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin: 0 0 0.6rem;
}
.cta-checklist-acao { margin: 0; }
.cta-checklist-btn {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-checklist-btn:hover { color: var(--gold); }

/* Linha única do índice e do por-assunto — mais discreta que o bloco acima:
   mesma família visual do `.nota-fonte` (texto pequeno, sem fio próprio, já
   que fica logo abaixo do `.ver-tambem`, que já fechou a seção com fio). */
.cta-checklist-linha {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.6;
  max-width: 68ch;
}
.cta-checklist-linha .cta-checklist-btn { font-size: inherit; }

/* "Ferramentas que ajudam nesta conferência" — mesma família visual da
   lista de assuntos (`.lista-assuntos`): link sublinhado, sem ícone, sem
   caixa. */
.ferramentas-uteis .lista-ferramentas,
.lista-ferramentas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-ferramentas li { font-family: var(--ff-body); font-size: 0.95rem; }
.lista-ferramentas a { color: var(--navy-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lista-ferramentas a:hover { color: var(--gold-muted); }

/* ── Foco de teclado (piso de qualidade) ─────────────────────────── */
.precedentes-lista a:focus-visible,
.assuntos-corpo a:focus-visible,
.tema-ficha a:focus-visible,
.filtro-campo:focus-visible,
.btn-copiar:focus-visible,
.tese-recortada-botao:focus-visible,
.regua-letras a:focus-visible,
.faq-auto summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Na ficha do tema o bloco de perguntas é mais uma seção da coluna de leitura: mesma borda
   esquerda e mesmo respiro das outras, sem o recuo e a largura que `.faq-auto` tem no site. */
.tema-grid .faq-auto {
  max-width: 68ch;
  margin: 2.5rem 0 0;
  padding: 0;
}

/* ── Hero compacto (G1/G3, bronca do orquestrador 21/09/2026) ─────────
   Sem rótulo em caixa alta (era "REPERTÓRIO DE JURISPRUDÊNCIA" — está na
   lista de PROIBIDOS do DESIGN.md) e com bem menos altura: o `.page-hero`
   do site (140px topo / 80px base) sobrava ~100px de vazio antes do
   conteúdo. `page-hero--compacto` mora DEPOIS de `/css/style.css` no
   `<head>` e ganha o empate de especificidade (mesma classe única). */
.page-hero--compacto { padding: 100px 0 28px; }
@media (max-width: 640px) {
  .page-hero--compacto { padding: 92px 0 20px; }
}

/* Respiro do topo do conteúdo, logo abaixo do hero — reduzido de 96px
   (padrão `.section` do site) para ~3rem (2rem no celular). Estas classes
   moram JUNTO de `.section`/`.section-sm` no HTML; como são todas seletores
   de uma classe só, a que vier depois no CSS ganha o empate — e a nossa
   folha carrega depois da do site. */
.precedentes-lista--compacta,
.assuntos-index--compacta,
.tema-ficha--compacta {
  padding-top: 3rem;
}
@media (max-width: 640px) {
  .precedentes-lista--compacta,
  .assuntos-index--compacta,
  .tema-ficha--compacta {
    padding-top: 2rem;
  }
}

/* ── Barra de busca fixa ao rolar, com estado "grudada" (I3) ──────────
   Sentinela de 1px ANTES da barra (irmã, não filha — ver `layout.mjs`): o
   `app.js` observa quando ele sai da tela para saber que a barra colou no
   topo, e só então encolhe (rótulo vira leitor de tela, contagem sobe para
   a linha do campo). Meta: ≤72px de altura no desktop, ≤64px no celular. */
.filtro-sentinela { height: 1px; }

.filtro-barra {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: var(--cream);
  padding: 1.1rem 0 0.9rem;
  border-bottom: 1px solid var(--border);
}
.filtro-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-mid);
  margin-bottom: 0.5rem;
}
.filtro-linha {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.filtro-campo {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 560px;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(200,167,91,0.30);
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: 0.98rem;
  background: var(--white);
  color: var(--text-dark);
}
.filtro-campo:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(200,167,91,0.15); }
.filtro-contagem {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-light);
  white-space: nowrap;
}
.filtro-vazio {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream-dark);
  color: var(--text-mid);
  font-size: 0.92rem;
}

.filtro-barra.grudada { padding: 0.45rem 0; }
.filtro-barra.grudada .filtro-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.filtro-barra.grudada .filtro-campo { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
@media (max-width: 480px) {
  .filtro-barra.grudada { padding: 0.35rem 0; }
}

/* ── Verbete do índice geral (repertório, não cartão) ──────────────── */
.verbetes-lista { margin-top: 1.25rem; }

.verbete {
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: 1.75rem;
  row-gap: 0.5rem;
  padding: 1.75rem 0;
  align-items: start;
}
/* Uma linha só entre verbetes — nunca duas (a barra de busca já fecha com
   a sua própria; `:first-child` tinha de depender da estrutura do pai, o
   `+` não depende de nada: só existe fio ENTRE dois verbetes de verdade). */
.verbete + .verbete { border-top: 1px solid var(--border); }

/* Numeral pendurado: é a ASSINATURA da página (G2, bronca do orquestrador
   21/09/2026) — GRANDE, na borda esquerda do `.container`, alinhado com o
   H1 do hero (que também começa na borda esquerda do container). */
.verbete-numero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: 0.2rem;
}
.verbete-numero-rotulo {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 0.15rem;
}
.verbete-numero-valor {
  font-family: var(--ff-title);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  font-weight: 600;
  color: var(--gold-muted);
}

.verbete-corpo { min-width: 0; }

.tese-oficial {
  font-family: var(--ff-accent);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-dark);
  max-width: 68ch;
  overflow-wrap: anywhere;
}
/* `/css/style.css` do site tem `p { color: var(--text-mid); font-size: ...}`
   global — um seletor de TAG só, mas como nada mais específico tocava
   font-size/color destes `<p>` (só o `.tese-oficial` pai, que não conta pra
   herança quando o FILHO tem regra própria concorrente), a voz do TST saía
   cinza-arroxeada e menor que o resto (achado do orquestrador, 21/09/2026,
   3ª rodada). `font: inherit; color: inherit` garante que todo `<p>` puxa
   exatamente o que o contêiner (`.tese-oficial` etc.) já define. */
.tese-oficial p { font: inherit; color: inherit; margin: 0 0 0.85rem; }
.tese-oficial p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .tese-oficial { font-size: 1.15rem; }
}

/* Recorte por ALTURA real (I2): o servidor manda a tese INTEIRA, uma cópia
   só. O `app.js` mede `scrollHeight`; só acima de ~9 linhas ele fixa
   `max-height` (inline, calculado da entrelinha de verdade) e acrescenta o
   botão abaixo. Sem JS, `max-height` nunca é aplicado — o texto já está
   todo visível, sem nenhum botão. */
.tese-oficial.tese-recortada { overflow: hidden; }
.tese-recortada-botao {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--ff-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tese-recortada-botao:hover { color: var(--gold); }

.tese-oficial-inline {
  font-family: var(--ff-accent);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text-dark);
  max-width: 68ch;
  overflow-wrap: anywhere;
}

.verbete-ausente {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: normal;
}

/* Aviso de tese superada: mais peso que a nota discreta abaixo, mas SEM cor
   de estado nova — só o fio dourado-fosco que o DESIGN já reserva para
   marcar o que precisa de atenção no verbete. */
.verbete-aviso {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid var(--gold-muted);
  background: var(--cream-dark);
  font-size: 0.85rem;
}
.verbete-aviso a { font-weight: 600; color: var(--navy-mid); }
.verbete-aviso a:hover { color: var(--gold-muted); }

.verbete-nota-discreta {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
}
.verbete-nota-discreta a { color: var(--text-light); text-decoration: underline; text-underline-offset: 2px; }
.verbete-nota-discreta a:hover { color: var(--gold-muted); }

.verbete-dados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem 1.5rem;
  margin: 1.25rem 0 0;
}
.verbete-dado { display: flex; flex-direction: column; gap: 0.15rem; }
.verbete-dado dt {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: var(--text-light);
  font-weight: 600;
}
.verbete-dado dd {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: var(--text-dark);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.verbete-dado dd a { color: var(--navy-mid); text-decoration: underline; text-underline-offset: 2px; }
.verbete-dado dd a:hover { color: var(--gold-muted); }

/* Uma coluna só (usado no `<aside>` da página do tema — T2). Especificidade
   dobrada (duas classes) para vencer `.verbete-dados` acima não importa a
   ordem. */
.verbete-dados.verbete-dados--coluna {
  grid-template-columns: 1fr;
  gap: 0;
}
.verbete-dados--coluna .verbete-dado {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.verbete-dados--coluna .verbete-dado:first-child { padding-top: 0; }
.verbete-dados--coluna .verbete-dado:last-child { border-bottom: none; padding-bottom: 0; }

/* Processo: número numa linha, as duas ações na linha de baixo, cada uma
   `white-space:nowrap` — "Consulta processual" nunca quebra ao meio (T5). */
.processo-linha { display: block; margin-bottom: 0.7rem; }
.processo-linha:last-child { margin-bottom: 0; }
.processo-num { display: block; overflow-wrap: anywhere; }
.processo-acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.processo-acoes > * { white-space: nowrap; }
.processo-consulta { font-size: 0.85rem; }

.btn-copiar {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy-mid);
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  min-height: 28px;
}
.btn-copiar:hover { background: rgba(200,167,91,0.14); border-color: rgba(200,167,91,0.4); }
.btn-copiar.copiado { color: var(--navy-deep); background: rgba(200,167,91,0.25); border-color: var(--gold); }

.verbete-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.25rem;
}
.verbete-links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.verbete-links a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .verbete { grid-template-columns: 1fr; }
  .verbete-numero { flex-direction: row; align-items: baseline; gap: 0.5rem; }
}

/* ── Lista de assuntos e "outros temas" (T3/T4, página do tema) ────── */
.lista-assuntos { display: flex; flex-direction: column; gap: 0.5rem; }
.lista-assuntos li { font-family: var(--ff-body); font-size: 0.95rem; }
.lista-assuntos a { color: var(--navy-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lista-assuntos a:hover { color: var(--gold-muted); }

.lista-outros-temas { display: flex; flex-direction: column; }
.outro-tema-item { border-top: 1px solid var(--border); }
.outro-tema-item:first-child { border-top: none; }
.outro-tema-item a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0; }
.outro-tema-numero { font-family: var(--ff-title); font-size: 1.05rem; font-weight: 600; color: var(--gold-muted); }
.outro-tema-tese { font-family: var(--ff-accent); font-size: 0.98rem; line-height: 1.45; color: var(--text-mid); }
.outro-tema-item a:hover .outro-tema-numero { color: var(--gold); }

/*
 * Linha de repertório compacta (A1, só `/por-assunto/`). A grade de 2-3
 * colunas da 2ª rodada ficou irregular (assunto com 4 temas: 3 numa fileira
 * e o 4º esticado a largura toda, fios quebrados) e atrapalhava a varredura
 * vertical — bronca do orquestrador, 21/09/2026, 3ª rodada: voltou a ser
 * UMA coluna só. A altura recuperada de outro jeito: recorte a 2 linhas (não
 * 3), padding vertical menor, e o aviso (tese superada/observação) deixou de
 * ter linha própria — entra na MESMA linha da situação e do link. Sem meta
 * de altura desta vez (relatada, não perseguida).
 */
.linhas-repertorio { margin-top: 0.5rem; }

.linha-repertorio {
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 1rem;
  padding: 0.7rem 0;
}
.linha-repertorio + .linha-repertorio { border-top: 1px solid var(--border); }

.linha-numero { display: flex; flex-direction: column; align-items: flex-start; }
.linha-numero-rotulo { font-family: var(--ff-body); font-size: 0.68rem; color: var(--text-light); }
.linha-numero-valor { font-family: var(--ff-title); font-size: 1.5rem; line-height: 1; font-weight: 600; color: var(--gold-muted); }

.linha-corpo { min-width: 0; }
.linha-tese-clamp {
  margin: 0;
  font-family: var(--ff-accent);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--text-dark);
  max-width: 80ch;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Situação, aviso (quando houver) e o link numa linha de rodapé só — o
   aviso não tem mais `<p>` própria. Situação muito longa (ex.: tema 115,
   "Concluso ao Relator em ... RE Pendente") recorta a 1 linha por CSS; o
   texto inteiro está no HTML e em `title` (acessível ao passar o mouse / a
   leitor de tela). */
.linha-rodape {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-mid);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
}
.linha-rodape a { color: var(--navy-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; flex: 0 0 auto; }
.linha-rodape a:hover { color: var(--gold-muted); }
.linha-situacao {
  min-width: 3rem;
  max-width: 100%;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-aviso-inline { color: var(--gold-muted) !important; }
.linha-aviso-inline--discreta { color: var(--text-light) !important; font-weight: 500 !important; }
.linha-aviso { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--text-light); }

@media (max-width: 640px) {
  .linha-repertorio { grid-template-columns: 1fr; row-gap: 0.3rem; }
  .linha-numero { flex-direction: row; align-items: baseline; gap: 0.4rem; }
  .linha-situacao { flex-basis: 100%; }
}

/* ── Por assunto: sumário em colunas + régua de letras ────────────── */
.assuntos-index { padding-bottom: 2rem; }

.sumario-colunas {
  columns: 3;
  column-gap: 2.5rem;
  margin-top: 2rem;
}
.sumario-grupo { break-inside: avoid-column; margin-bottom: 1.25rem; }
.sumario-grupo h3 {
  font-family: var(--ff-title);
  font-size: 1.1rem;
  color: var(--gold-muted);
  margin-bottom: 0.4rem;
}
.sumario-grupo ul { display: flex; flex-direction: column; gap: 0.3rem; }
.sumario-grupo li { font-size: 0.88rem; line-height: 1.4; }
.sumario-grupo a { color: var(--navy-mid); }
.sumario-grupo a:hover { color: var(--gold-muted); }
.sumario-contagem { color: var(--text-light); font-size: 0.8rem; }

.assuntos-corpo-grade {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 2rem;
  align-items: start;
}

.regua-letras {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 600;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.regua-letras a { color: var(--text-mid); padding: 0.1rem 0; }
.regua-letras a:hover, .regua-letras a.ativa { color: var(--gold-muted); }
.regua-inativa { color: var(--border); }

/* Margem entre assuntos: 2rem (pedido do orquestrador, 3ª rodada). */
.assunto-secao { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.letra-secao:first-child .assunto-secao:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* H2 do assunto (A2): nome em Playfair (herdado), código CNJ e contagem em
   Inter pequeno na mesma linha — contagem empurrada para o fim. */
.assunto-secao h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 1.15rem;
  color: var(--navy-deep);
  margin-bottom: 0.15rem;
}
.assunto-nome { font-family: var(--ff-title); }
.assunto-codigo {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-light);
}
.assunto-contagem {
  margin-left: auto;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
}
.assunto-explicacao {
  font-size: 0.9rem;
  color: var(--text-mid);
  max-width: 68ch;
  margin-bottom: 0.5rem;
}
.assunto-secao--sem { border-top: 2px solid var(--border); margin-top: 1rem; padding-top: 2rem; }

@media (max-width: 900px) {
  .assuntos-corpo-grade { grid-template-columns: 1fr; }
  .regua-letras {
    position: sticky;
    top: 76px;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    gap: 0.9rem;
    padding: 0.6rem 0;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    z-index: 30;
  }
  .sumario-colunas { columns: 2; }
}
@media (max-width: 640px) {
  .sumario-colunas { columns: 1; }
}

/* ── Ficha do tema ────────────────────────────────────────────────── */
/* O container mantém a largura do site (borda esquerda igual à do H1 do hero); quem limita
   a medida de leitura é a grade, alinhada à esquerda dentro dele. */
.tema-ficha-largura > * { max-width: 1080px; }

.aviso-ausente {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--cream-dark);
  color: var(--text-mid);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Grade de duas colunas no desktop (T2): tese à esquerda em cima, `<aside>`
   fixo à direita (dados do julgamento + acesso à fonte), resto do conteúdo
   embaixo da tese. No celular, a ORDEM vira tese -> aside -> resto — o
   aside desce para logo depois da tese, como pedido — via
   `grid-template-areas`, sem precisar reordenar nada no HTML. */
.tema-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "tese" "aside" "resto";
  gap: 2.5rem;
}
.tema-grid-tese { grid-area: tese; }
.tema-aside { grid-area: aside; }
.tema-grid-resto { grid-area: resto; display: flex; flex-direction: column; gap: 2.5rem; }

@media (min-width: 1024px) {
  .tema-grid {
    grid-template-columns: 1fr 320px;
    grid-template-areas: "tese aside" "resto aside";
    column-gap: 3.5rem;
    row-gap: 2.5rem;
    align-items: start;
  }
  .tema-aside { position: sticky; top: 108px; }
}

/* Tese firmada (T1): o MAIOR texto corrido da página — é a resposta direta.
   Sem borda lateral, sem fundo: só o H2 antes e a atribuição em Inter
   pequena depois. */
.tese-firmada-secao h2 { margin-bottom: 1rem; }
.tese-firmada {
  font-family: var(--ff-accent);
  font-size: clamp(1.35rem, 1.6vw, 1.6rem);
  line-height: 1.55;
  color: var(--text-dark);
  max-width: 68ch;
  overflow-wrap: anywhere;
  margin: 0 0 1rem;
}
.tese-firmada p { font: inherit; color: inherit; margin: 0 0 1rem; }
.tese-firmada p:last-child { margin-bottom: 0; }
.tese-atribuicao {
  font-family: var(--ff-body);
  font-size: 0.82rem;
  color: var(--text-light);
}
.tese-atribuicao a { color: var(--gold-muted); text-decoration: underline; text-underline-offset: 2px; }
.tese-atribuicao a:hover { color: var(--gold); }

/* Redação da ficha, quando diverge da tabela (achado do coletor, 21/09/2026,
   66 de 217 temas) — `<details>` comum, sem caixa, só um fio em cima; o
   texto da ficha continua em serifa (voz do TST), a marcação é só Inter. */
.redacao-ficha {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.redacao-ficha summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-mid);
}
.redacao-ficha summary::-webkit-details-marker { display: none; }
.redacao-ficha summary::before {
  content: '+';
  display: inline-block;
  width: 1em;
  color: var(--gold-muted);
}
.redacao-ficha[open] summary::before { content: '−'; }
.redacao-ficha .tese-oficial { margin-top: 0.9rem; font-size: 1.05rem; }
.redacao-ficha .tese-atribuicao { margin-top: 0.75rem; }

/* Link para dado hospedado fora do domínio do TST (ex.: acórdão no Google
   Drive) — o host aparece ao lado, para o leitor saber que vai sair do TST
   (auditoria de segurança, 21/09/2026). */
.link-host-externo {
  font-size: 0.82em;
  color: var(--text-light);
}

/* Tese superada (achado 21/09/2026, IAC-2): mesma família visual do aviso de
   ausência (fio dourado-fosco + fundo creme-escuro), nunca vermelho/riscado —
   é rótulo textual, não cor de estado nova. */
.tese-superada {
  padding: 1.5rem 1.75rem;
  background: var(--cream-dark);
  border-left: 3px solid var(--gold-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tese-superada-contexto {
  font-size: 0.92rem;
  color: var(--text-mid);
  margin-bottom: 1rem;
  max-width: 68ch;
}
.tese-superada .tese-oficial { font-size: 1.1rem; opacity: 0.92; }
.tese-superada .verbete-dados { margin-top: 1.25rem; }

.suspensao-detalhe .verbete-dado dd { overflow-wrap: anywhere; }

.tema-ficha h2 {
  font-family: var(--ff-title);
  font-size: 1.3rem;
  color: var(--navy-deep);
  margin-bottom: 0.9rem;
}
/* H2 do aside menor — hierarquia: a tese principal manda na página. */
.tema-aside h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.tema-aside section + section { margin-top: 2rem; }
.tema-aside .verbete-dado dd { font-size: 0.88rem; }

.lista-fonte { display: flex; flex-direction: column; gap: 0.3rem; }
.lista-fonte a { color: var(--navy-mid); text-decoration: underline; text-underline-offset: 2px; }
.lista-fonte a:hover { color: var(--gold-muted); }

/* "Como ler esta ficha" (T6): seção comum, sem caixa — só um fio em cima,
   como o resto da página. Fica depois da navegação tema anterior/seguinte,
   antes da nota de fonte (a ordem já sai certa em `pagina-tema.mjs`). */
.como-ler { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.como-ler h2 { margin-bottom: 1rem; }
.como-ler .verbete-dado dd { color: var(--text-mid); }

.navegacao-temas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.nav-tema { display: flex; flex-direction: column; gap: 0.2rem; }
.nav-tema--seguinte { text-align: right; align-items: flex-end; }
.nav-tema-rotulo { font-size: 0.75rem; color: var(--text-light); }
.nav-tema-valor { font-family: var(--ff-title); font-size: 1.15rem; color: var(--gold-muted); font-weight: 600; }
.nav-tema:hover .nav-tema-valor { color: var(--gold); }

@media (max-width: 640px) {
  .navegacao-temas { grid-template-columns: 1fr; }
  .nav-tema--seguinte { text-align: left; align-items: flex-start; }
}

/* ── Impressão (advogado imprime) ─────────────────────────────────── */
@media print {
  .filtro-sentinela, .filtro-barra, .regua-letras, #nav-placeholder, #footer-placeholder,
  .btn-copiar, .verbete-links, .navegacao-temas, .faq-auto summary::after,
  .tese-recortada-botao, .cta-checklist, .cta-checklist-linha, .ferramentas-uteis {
    display: none !important;
  }
  .tese-oficial.tese-recortada { max-height: none !important; overflow: visible !important; }
  .verbete, .linha-repertorio { break-inside: avoid; }
  .tema-grid { display: block; }
  .tema-aside { position: static; margin-top: 2rem; }
}

/* ── Movimento reduzido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}