/* Design System v2 — Busca em jurisprudência (área pública)
 * =====================================================================
 * Cobre as duas ferramentas de busca client-side de jurisprudência:
 *   /informativo  ia/template/busca-precedentes-stj-penal-2021-2026.html  (.stj-app)
 *   /sumulas      ia/template/busca-sumulas.html                          (.sum-app)
 *
 * Substitui três folhas antigas — dpmg-busca-juris.css (compartilhada),
 * dpmg-precedentes.css (só Informativos STJ) e dpmg-sumulas.css (só
 * Súmulas e Teses). A estrutura abaixo espelha essa origem: uma seção por
 * folha antiga, na ordem em que eram carregadas. Onde o mesmo seletor
 * existia nas duas folhas específicas (Precedentes/Súmulas) com a MESMA
 * declaração, as duas cópias foram mantidas lado a lado (uma por seção de
 * origem) em vez de fundidas — é assim que as antigas garantiam que cada
 * ferramenta continuasse funcionando sozinha se a outra fosse removida.
 *
 * Carregada depois de ds.css → ds-compat.css → ds-shell.css → ds-publico.css
 * nas duas páginas. Os tokens --dpmg-*, --chip-*, --cor-aviso-*, --color-*,
 * --font-*, --space-* e --radius-* das folhas antigas (definidos em
 * dpmg-tokens.css, que NÃO está mais na pilha) foram reescritos aqui para
 * o equivalente --ds-* mais próximo — ver comentário "excecao" onde o
 * valor antigo não tinha correspondência exata em ds.css.
 * ===================================================================== */


/* =====================================================================
 * COMUM ÀS DUAS BUSCAS — origem: dpmg-busca-juris.css (RF6)
 * Chip-link e banner de citação cruzada entre Informativos STJ e Súmulas
 * e Teses: uma ferramenta linka notas/enunciados da outra por slug
 * (?cit=), e o card de resultado mostra um chip para o alvo do link.
 * ===================================================================== */

/* Chip-link cruzado (RF6) — tint neutro/ardósia (mesma família de
   --chip-tribunal-* e --chip-civel-*), para não se confundir com o chip de
   vínculo de súmula (RF5, âmbar) nem com o chip de edição. */
.sum-app .tag.xref,
.stj-app .tag.xref {
    background: var(--ds-info-bg);
    color: var(--ds-info-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.sum-app .tag.xref:hover,
.stj-app .tag.xref:hover { filter: brightness(0.94); }
.sum-app .tag.xref:focus-visible,
.stj-app .tag.xref:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
}

/* Banner de filtro ativo por citação cruzada (RF6, deep-link ?ref=/?cit=) */
.sum-app .xref-banner,
.stj-app .xref-banner {
    background: var(--ds-warning-bg);
    border: 1px solid var(--ds-warning-border);
    color: var(--ds-warning-text);
    padding: var(--ds-space-2) var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-text-sm);
    line-height: var(--ds-leading-normal);
    margin-top: var(--ds-space-4);
    min-width: 0;
}
.sum-app .xref-banner a,
.stj-app .xref-banner a {
    color: inherit;
    font-weight: var(--ds-weight-semibold);
    text-decoration: underline;
}


/* =====================================================================
 * INFORMATIVOS STJ (/informativo) — origem: dpmg-precedentes.css
 * Específico da página de Informativos STJ Penal. O que é compartilhado
 * com Súmulas e Teses (chip/banner de citação cruzada) já foi escrito
 * acima.
 * ===================================================================== */

/* ---- Hero ---- */
.stj-hero {
    background: linear-gradient(135deg, var(--ds-green-900) 0%, var(--ds-green-700) 100%);
    color: var(--ds-on-brand);
    padding: var(--ds-space-7) 0 var(--ds-space-8);
}
.stj-hero h1 {
    margin: 0;
    font-weight: var(--ds-weight-bold);
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    line-height: var(--ds-leading-tight);
    /* consolidado aqui (era partido com a casca no CSS antigo) */
    position: relative;
    padding-bottom: 0.7rem;
}

/* Sublinhado dourado do H1 — mesmo ornamento do hero público genérico
   (.hero-section h1::after em ds-publico.css), reproduzido aqui porque
   .stj-hero só é usado por esta página, que já é dona do resto do
   componente. */
.stj-hero h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-gold-500);
}

.stj-hero p {
    margin: var(--ds-space-2) 0 0;
    font-family: var(--ds-font-ui);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9); /* excecao permitida: véu claro sobre fundo de marca, sem tint de cor */
    line-height: var(--ds-leading-normal);
}

/* ---- Aviso de vigência (disclaimer público, compacto/expansível) ---- */
.stj-app details.aviso {
    background: var(--ds-warning-bg);
    border-bottom: 1px solid var(--ds-warning-border);
    color: var(--ds-warning-text);
    padding: 11px var(--ds-space-5);
    font-size: var(--ds-text-sm);
    line-height: 1.45;
}
/* excecao: tom de texto do aviso mais escuro que --ds-warning-text; --ds-gold-ink
   (#5c4300) é o token mais próximo do #5a4200 original — mesma família âmbar-tinta */
.stj-app details.aviso strong { color: var(--ds-gold-ink); }
.stj-app details.aviso summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    gap: var(--ds-space-2);
    align-items: baseline;
}
.stj-app details.aviso summary::-webkit-details-marker { display: none; }
.stj-app details.aviso summary .aviso-resumo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.stj-app details.aviso[open] summary .aviso-resumo { white-space: normal; }
.stj-app details.aviso .aviso-toggle {
    margin-left: auto;
    /* excecao: mesmo tom de texto do aviso acima, ver nota em details.aviso strong */
    color: var(--ds-gold-ink);
    font-weight: var(--ds-weight-semibold);
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
}
.stj-app details.aviso .aviso-toggle .rotulo-recolher { display: none; }
.stj-app details.aviso[open] .aviso-toggle .rotulo-mais { display: none; }
.stj-app details.aviso[open] .aviso-toggle .rotulo-recolher { display: inline; }
.stj-app details.aviso .aviso-full { margin-top: var(--ds-space-2); }
.stj-app details.aviso summary:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
    border-radius: var(--ds-radius-sm);
}

/* ---- App de busca ---- */
.stj-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--ds-space-4) var(--ds-space-5) 60px;
}
.stj-app .controls {
    position: sticky;
    top: 0;
    background: var(--ds-bg);
    padding: var(--ds-space-4) 0;
    z-index: var(--ds-z-sticky);
    /* excecao: cinza neutro de divisor sob a barra sticky, sem valor exato em ds.css;
       --ds-border-strong é o token decorativo mais próximo (mesmo papel de divisória) */
    border-bottom: 1px solid var(--ds-border-strong);
}
.stj-app #q {
    width: 100%;
    padding: var(--ds-space-3) 14px;
    font-size: 1rem;
    /* borda DE CONTROLE (campo de texto real) — --ds-border-control garante 3:1 (WCAG 1.4.11) */
    border: 1px solid var(--ds-border-control);
    border-radius: var(--ds-radius-md);
    outline: none;
    transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
    min-width: 0;
}
.stj-app #q:focus {
    border-color: var(--ds-green-700);
    box-shadow: 0 0 0 3px rgba(var(--ds-green-700-rgb), 0.18);
}
.stj-app .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-top: 10px;
    align-items: center;
}
/* Selects estilizados: seta custom, raio dos tokens, foco verde */
.stj-app .filters select {
    padding: var(--ds-space-2) 34px var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ds-border-control);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-surface);
    /* excecao: seta custom em SVG inline — cor codificada em URL (%23), não é declaração de cor CSS.
       %231a5c3a corresponde a --ds-green-700, mantido em hex por ser conteúdo de data-URI, não CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231a5c3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ds-space-2) center;
    font-size: var(--ds-text-sm);
    color: var(--ds-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
    min-width: 0;
}
.stj-app .filters select:hover { border-color: var(--ds-green-500); }
.stj-app .filters select:focus-visible {
    outline: none;
    border-color: var(--ds-green-700);
    box-shadow: 0 0 0 3px rgba(var(--ds-green-700-rgb), 0.22);
}
/* Contador com mais peso visual */
.stj-app .count {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-semibold);
    color: var(--ds-green-900);
    margin-left: auto;
    background: rgba(var(--ds-green-700-rgb), 0.08);
    padding: 5px var(--ds-space-3);
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
}
.stj-app .count strong { font-weight: var(--ds-weight-bold); }

/* Card de resultado (nome próprio para não colidir com o .card do compat) */
.stj-app .stj-card {
    background: var(--ds-surface);
    /* excecao: cinza neutro de borda de card, sem token dedicado; --ds-border-strong
       é a variante decorativa mais próxima do #e2e7ec original */
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-4) var(--ds-space-5);
    margin-top: var(--ds-space-4);
    min-width: 0;
}
/* Chips: >= 12px, cores derivadas dos tokens semânticos da paleta */
.stj-app .tag {
    display: inline-block;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-weight-semibold);
    padding: 3px var(--ds-space-3);
    border-radius: var(--ds-radius-full);
    margin-right: 6px;
    margin-bottom: var(--ds-space-1);
    line-height: 1.4;
}
/* Família penal — tint de verde institucional */
.stj-app .tag.p,
.stj-app .tag.pp,
.stj-app .tag.ep { background: var(--ds-green-100); color: var(--ds-success-text); }
/* Família cível e demais ramos — tint neutro/ardósia */
.stj-app .tag.c,
.stj-app .tag.pc,
.stj-app .tag.dc,
.stj-app .tag.ca { background: var(--ds-info-bg); color: var(--ds-info-text); }
/* Edição / data — tint âmbar */
.stj-app .tag.ed { background: var(--ds-gold-100); color: var(--ds-warning-text); }
/* Alerta de classificação — tint âmbar de aviso */
.stj-app .tag.warn {
    background: var(--ds-warning-bg);
    color: var(--ds-warning-text);
    border: 1px solid var(--ds-warning-border);
}

.stj-app .tema { font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-md); margin: var(--ds-space-2) 0 var(--ds-space-2); color: var(--ds-green-700); }
/* Ementa em tipografia de leitura: 16px / 1.6 */
.stj-app .dest {
    /* excecao: cinza neutro de fundo de destaque, sem token dedicado; --ds-surface-alt
       é a superfície neutra mais próxima do #f7f9fb original */
    background: var(--ds-surface-alt);
    border-left: 3px solid var(--ds-green-700);
    padding: var(--ds-space-3) 14px;
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    font-size: var(--ds-text-md);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: var(--ds-space-2) 0;
    min-width: 0;
}
/* Número de processo em fonte tabular/mono. ds.css não define --ds-font-mono
   (a área restrita não usa fonte monoespaçada); mantida a pilha mono do sistema
   operacional, igual ao antigo --font-mono, por não ser um token de cor/espaço */
.stj-app .proc {
    font-family: 'Courier New', monospace;
    font-size: var(--ds-text-sm);
    /* excecao: cinza de texto secundário — coincide com --ds-info-text (#35424f ≈ #39424f original) */
    color: var(--ds-info-text);
    margin: 10px 0 4px;
    font-variant-numeric: tabular-nums;
}
/* Bloco de precedentes colapsado por padrão */
.stj-app details.refs {
    margin-top: var(--ds-space-2);
    /* excecao: cinza neutro de divisor, sem token dedicado; --ds-border é a
       variante decorativa mais leve, igual ao papel do #eef0f2 original */
    border-top: 1px solid var(--ds-border);
    padding-top: var(--ds-space-2);
}
.stj-app details.refs summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-semibold);
    color: var(--ds-green-700);
}
.stj-app details.refs summary::-webkit-details-marker { display: none; }
.stj-app details.refs summary .chev { transition: transform var(--ds-duration-fast) var(--ds-ease); }
.stj-app details.refs[open] summary .chev { transform: rotate(90deg); }
.stj-app details.refs summary:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
    border-radius: var(--ds-radius-sm);
}
.stj-app .add {
    font-family: 'Courier New', monospace; /* ver nota em .stj-app .proc — sem --ds-font-mono */
    font-size: 12.5px;
    line-height: 1.55;
    /* excecao: cinza de texto secundário, sem token exato; --ds-text-muted mais próximo */
    color: var(--ds-text-muted);
    margin-top: var(--ds-space-2);
    font-variant-numeric: tabular-nums;
    white-space: pre-wrap;
    min-width: 0;
}
.stj-app .links { margin-top: var(--ds-space-4); display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }
.stj-app .links a,
.stj-app .stj-btn {
    font-size: 12.5px;
    text-decoration: none;
    padding: 6px 11px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border-control);
    color: var(--ds-green-700);
    background: var(--ds-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: var(--ds-leading-tight);
}
.stj-app .links a i,
.stj-app .stj-btn i { font-size: var(--ds-text-md); }
/* excecao: cinza claro de hover, sem token dedicado; --ds-surface-alt mais próximo */
.stj-app .links a:hover,
.stj-app .stj-btn:hover { background: var(--ds-surface-alt); }
.stj-app .links a:focus-visible,
.stj-app .stj-btn:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
}
/* excecao: verde de feedback "copiado" — mapeado para a família semântica de sucesso
   (--ds-success-*), tom distinto do verde de marca, igual à intenção do original */
.stj-app .stj-btn.copied { color: var(--ds-success-text); border-color: var(--ds-success-border); background: var(--ds-success-bg); }
/* Destaque do termo buscado (<mark>): é INFORMAÇÃO (mostra onde o termo bateu),
   não decoração — por isso usa o par bg/texto semântico de aviso (--ds-warning-bg
   + --ds-text), que garante contraste AA alto (texto escuro sobre fundo claro),
   em vez do amarelo saturado solto (#ffe9a8) do CSS antigo */
.stj-app mark { background: var(--ds-warning-bg); color: var(--ds-text); padding: 0 1px; border-radius: 2px; }

/* Estados: vazio e erro desenhados */
.stj-app .state {
    text-align: center;
    color: var(--ds-text-muted);
    padding: 44px var(--ds-space-5);
}
.stj-app .state .state-icon { font-size: 2rem; color: var(--ds-green-500); display: block; margin-bottom: 10px; }
.stj-app .state h2 { font-size: var(--ds-text-lg); color: var(--ds-green-900); margin: 0 0 6px; }
.stj-app .state p { margin: 0; font-size: var(--ds-text-md); }
/* excecao: vermelho de estado de erro — mapeado para --ds-danger-text, mesma
   família semântica de perigo do design system (ícone que carrega significado) */
.stj-app .state.state-error .state-icon { color: var(--ds-danger-text); }

/* Skeleton loaders */
.stj-app .skeleton-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-4) var(--ds-space-5);
    margin-top: var(--ds-space-4);
    min-width: 0;
}
.stj-app .sk {
    /* excecao: gradiente de shimmer neutro, sem token dedicado; --ds-surface-alt/
       --ds-surface-sunken reproduzem a variação clara↔um-pouco-mais-escura do original */
    background: linear-gradient(90deg, var(--ds-surface-alt) 25%, var(--ds-surface-sunken) 37%, var(--ds-surface-alt) 63%);
    background-size: 400% 100%;
    border-radius: var(--ds-radius-sm);
    animation: sk-shimmer 1.2s ease-in-out infinite;
}
.stj-app .sk-line { height: 12px; margin-bottom: 10px; }
.stj-app .sk-chip { display: inline-block; width: 90px; height: 20px; border-radius: var(--ds-radius-full); margin-right: var(--ds-space-2); }
.stj-app .sk-title { height: 16px; width: 70%; margin: var(--ds-space-4) 0; }
.stj-app .sk-block { height: 54px; margin: 10px 0; border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; }
.stj-app .sk-w40 { width: 40%; }
.stj-app .sk-w60 { width: 60%; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Reduced-motion: NÃO é o bloco universal que ds.css já cobre (que zera os
   tokens --ds-duration-*, e por isso já cobre .chev acima, que usa
   var(--ds-duration-fast)). O shimmer do skeleton usa uma duração literal
   (1.2s, não vinculada a token) — sem este bloco, ele continuaria animando
   infinitamente para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
    .stj-app .sk { animation: none; }
}

/* excecao: cinza de texto secundário do rodapé, sem token exato; --ds-text-faint mais próximo */
.stj-app .foot { text-align: center; color: var(--ds-text-faint); font-size: var(--ds-text-xs); margin-top: var(--ds-space-9); }


/* =====================================================================
 * SÚMULAS E TESES (/sumulas) — origem: dpmg-sumulas.css
 * Específico da página de Súmulas do STJ/STF e Jurisprudência em Teses.
 * O que é compartilhado com Informativos STJ (chip/banner de citação
 * cruzada) já foi escrito na seção "COMUM ÀS DUAS BUSCAS" acima.
 * ===================================================================== */

/* ---- Hero ---- */
.sum-hero {
    background: linear-gradient(135deg, var(--ds-green-900) 0%, var(--ds-green-700) 100%);
    color: var(--ds-on-brand);
    padding: var(--ds-space-7) 0 var(--ds-space-8);
}
.sum-hero h1 {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: var(--ds-weight-bold);
    font-size: clamp(1.5rem, 3.6vw, 2.15rem);
    line-height: var(--ds-leading-tight);
}
.sum-hero p {
    margin: var(--ds-space-2) 0 0;
    font-family: var(--ds-font-ui);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9); /* excecao permitida: véu claro sobre fundo de marca */
    line-height: var(--ds-leading-normal);
}

/* ---- Aviso de vigência (disclaimer público, compacto/expansível) ----
 * NOTA: mesmo padrão visual e mesmos seletores de .stj-app details.aviso
 * acima — mantidos separados (namespace .sum-app) porque as folhas
 * antigas os declaravam em arquivos distintos, cada um dono de sua
 * página; não há conflito de declaração entre as duas cópias. */
.sum-app details.aviso {
    background: var(--ds-warning-bg);
    border-bottom: 1px solid var(--ds-warning-border);
    color: var(--ds-warning-text);
    padding: 11px var(--ds-space-5);
    font-size: var(--ds-text-sm);
    line-height: 1.45;
}
.sum-app details.aviso strong { color: var(--ds-gold-ink); } /* ver nota em .stj-app details.aviso strong */
.sum-app details.aviso summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    gap: var(--ds-space-2);
    align-items: baseline;
}
.sum-app details.aviso summary::-webkit-details-marker { display: none; }
.sum-app details.aviso summary .aviso-resumo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.sum-app details.aviso[open] summary .aviso-resumo { white-space: normal; }
.sum-app details.aviso .aviso-toggle {
    margin-left: auto;
    color: var(--ds-gold-ink);
    font-weight: var(--ds-weight-semibold);
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
}
.sum-app details.aviso .aviso-toggle .rotulo-recolher { display: none; }
.sum-app details.aviso[open] .aviso-toggle .rotulo-mais { display: none; }
.sum-app details.aviso[open] .aviso-toggle .rotulo-recolher { display: inline; }
.sum-app details.aviso .aviso-full { margin-top: var(--ds-space-2); }
.sum-app details.aviso summary:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
    border-radius: var(--ds-radius-sm);
}

/* ---- App de busca ---- */
.sum-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--ds-space-4) var(--ds-space-5) 60px;
}
.sum-app .controls {
    position: sticky;
    top: 0;
    background: var(--ds-bg);
    padding: var(--ds-space-4) 0;
    z-index: var(--ds-z-sticky);
    border-bottom: 1px solid var(--ds-border-strong); /* ver nota em .stj-app .controls */
}
.sum-app #q {
    width: 100%;
    padding: var(--ds-space-3) 14px;
    font-size: 1rem;
    border: 1px solid var(--ds-border-control);
    border-radius: var(--ds-radius-md);
    outline: none;
    transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
    min-width: 0;
}
.sum-app #q:focus {
    border-color: var(--ds-green-700);
    box-shadow: 0 0 0 3px rgba(var(--ds-green-700-rgb), 0.18);
}
.sum-app .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-top: 10px;
    align-items: center;
}
/* Selects estilizados: seta custom, raio dos tokens, foco verde */
.sum-app .filters select {
    padding: var(--ds-space-2) 34px var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ds-border-control);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-surface);
    /* excecao: seta custom em SVG inline — ver nota em .stj-app .filters select */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231a5c3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ds-space-2) center;
    font-size: var(--ds-text-sm);
    color: var(--ds-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
    min-width: 0;
}
.sum-app .filters select:hover { border-color: var(--ds-green-500); }
.sum-app .filters select:focus-visible {
    outline: none;
    border-color: var(--ds-green-700);
    box-shadow: 0 0 0 3px rgba(var(--ds-green-700-rgb), 0.22);
}
.sum-app .filters select:disabled { opacity: 0.55; cursor: not-allowed; }
/* Contador com mais peso visual */
.sum-app .count {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-semibold);
    color: var(--ds-green-900);
    margin-left: auto;
    background: rgba(var(--ds-green-700-rgb), 0.08);
    padding: 5px var(--ds-space-3);
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
}
.sum-app .count strong { font-weight: var(--ds-weight-bold); }
/* excecao: cinza de texto secundário, sem token exato; --ds-text-muted mais próximo */
.sum-app .count .count-hint { font-weight: var(--ds-weight-medium); color: var(--ds-text-muted); }

/* Card de resultado (nome próprio para não colidir com o .card do compat) */
.sum-app .sum-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong); /* ver nota em .stj-app .stj-card */
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-4) var(--ds-space-5);
    margin-top: var(--ds-space-4);
    min-width: 0;
}
/* Chips: >= 12px, cores derivadas dos tokens semânticos da paleta */
.sum-app .tag {
    display: inline-block;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-weight-semibold);
    padding: 3px var(--ds-space-3);
    border-radius: var(--ds-radius-full);
    margin-right: 6px;
    margin-bottom: var(--ds-space-1);
    line-height: 1.4;
}
/* Tribunal — tint neutro/ardósia */
.sum-app .tag.tribunal { background: var(--ds-info-bg); color: var(--ds-info-text); }
/* Tipo súmula comum / tese — tint neutro/ardósia */
.sum-app .tag.tipo { background: var(--ds-info-bg); color: var(--ds-info-text); }
/* Tipo súmula vinculante — tint âmbar (destaca autoridade) */
.sum-app .tag.sv { background: var(--ds-gold-100); color: var(--ds-warning-text); }
/* Situação vigente — verde */
.sum-app .tag.vigente { background: var(--ds-success-bg); color: var(--ds-success-text); }
/* Situação cancelada/superada — neutro/cinza (NUNCA vermelho). Sem token exato
   para #e9ecef/#495057 em ds.css; --ds-surface-sunken/--ds-text-muted são os
   neutros mais próximos disponíveis, preservando a intenção "neutro, não perigo" */
.sum-app .tag.cancelada { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }
/* Ramo penal — tint de verde institucional */
.sum-app .tag.ramo-p,
.sum-app .tag.ramo-pp,
.sum-app .tag.ramo-ep { background: var(--ds-green-100); color: var(--ds-success-text); }
/* Ramo cível e demais — tint neutro/ardósia */
.sum-app .tag.ramo-c,
.sum-app .tag.ramo-pc,
.sum-app .tag.ramo-dc,
.sum-app .tag.ramo-ca,
.sum-app .tag.ramo-o { background: var(--ds-info-bg); color: var(--ds-info-text); }
/* Chip de vínculo clicável (RF5) */
.sum-app .tag.vinculo {
    background: var(--ds-gold-100);
    color: var(--ds-warning-text);
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.sum-app .tag.vinculo:hover { filter: brightness(0.96); }
.sum-app .tag.vinculo:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
}

/* Título do enunciado */
.sum-app .tema { font-weight: var(--ds-weight-bold); font-size: var(--ds-text-md); margin: var(--ds-space-2) 0 var(--ds-space-2); color: var(--ds-green-700); }
/* Enunciado em tipografia de leitura: 16px / 1.6 */
.sum-app .dest {
    background: var(--ds-surface-alt); /* ver nota em .stj-app .dest */
    border-left: 3px solid var(--ds-green-700);
    padding: var(--ds-space-3) 14px;
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    font-size: var(--ds-text-md);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: var(--ds-space-2) 0;
    min-width: 0;
}
/* Bloco de precedentes colapsado por padrão */
.sum-app details.refs {
    margin-top: var(--ds-space-2);
    border-top: 1px solid var(--ds-border); /* ver nota em .stj-app details.refs */
    padding-top: var(--ds-space-2);
}
.sum-app details.refs summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-semibold);
    color: var(--ds-green-700);
}
.sum-app details.refs summary::-webkit-details-marker { display: none; }
.sum-app details.refs summary .chev { transition: transform var(--ds-duration-fast) var(--ds-ease); }
.sum-app details.refs[open] summary .chev { transform: rotate(90deg); }
.sum-app details.refs summary:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
    border-radius: var(--ds-radius-sm);
}
.sum-app .add {
    font-family: 'Courier New', monospace; /* ver nota em .stj-app .proc — sem --ds-font-mono */
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ds-text-muted); /* ver nota em .stj-app .add */
    margin-top: var(--ds-space-2);
    font-variant-numeric: tabular-nums;
    white-space: pre-wrap;
    min-width: 0;
}
.sum-app .links { margin-top: var(--ds-space-4); display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }
.sum-app .links a,
.sum-app .sum-btn {
    font-size: 12.5px;
    text-decoration: none;
    padding: 6px 11px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border-control);
    color: var(--ds-green-700);
    background: var(--ds-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: var(--ds-leading-tight);
    min-height: 32px;
}
.sum-app .links a i,
.sum-app .sum-btn i { font-size: var(--ds-text-md); }
.sum-app .links a:hover,
.sum-app .sum-btn:hover { background: var(--ds-surface-alt); } /* ver nota em .stj-app .links a:hover */
.sum-app .links a:focus-visible,
.sum-app .sum-btn:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
}
.sum-app .sum-btn.copied { color: var(--ds-success-text); border-color: var(--ds-success-border); background: var(--ds-success-bg); } /* ver nota em .stj-app .stj-btn.copied */
/* Destaque do termo buscado — ver nota completa em .stj-app mark acima:
   informação (não decoração), contraste AA garantido por --ds-text sobre
   --ds-warning-bg. */
.sum-app mark { background: var(--ds-warning-bg); color: var(--ds-text); padding: 0 1px; border-radius: 2px; }

/* Estados: vazio, erro, carga pendente */
.sum-app .state {
    text-align: center;
    color: var(--ds-text-muted);
    padding: 44px var(--ds-space-5);
}
.sum-app .state .state-icon { font-size: 2rem; color: var(--ds-green-500); display: block; margin-bottom: 10px; }
.sum-app .state h2 { font-size: var(--ds-text-lg); color: var(--ds-green-900); margin: 0 0 6px; }
.sum-app .state p { margin: 0; font-size: var(--ds-text-md); }
.sum-app .state.state-error .state-icon { color: var(--ds-danger-text); } /* ver nota em .stj-app .state.state-error */
.sum-app .state .state-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--ds-space-4);
    padding: var(--ds-space-2) var(--ds-space-4);
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border-control);
    background: var(--ds-surface);
    color: var(--ds-green-700);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-semibold);
    cursor: pointer;
}
.sum-app .state .state-action:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-outline-offset);
    box-shadow: var(--ds-focus-ring);
}

/* Skeleton loaders */
.sum-app .skeleton-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-4) var(--ds-space-5);
    margin-top: var(--ds-space-4);
    min-width: 0;
}
.sum-app .sk {
    background: linear-gradient(90deg, var(--ds-surface-alt) 25%, var(--ds-surface-sunken) 37%, var(--ds-surface-alt) 63%); /* ver nota em .stj-app .sk */
    background-size: 400% 100%;
    border-radius: var(--ds-radius-sm);
    animation: sk-shimmer 1.2s ease-in-out infinite;
}
.sum-app .sk-line { height: 12px; margin-bottom: 10px; }
.sum-app .sk-chip { display: inline-block; width: 90px; height: 20px; border-radius: var(--ds-radius-full); margin-right: var(--ds-space-2); }
.sum-app .sk-title { height: 16px; width: 70%; margin: var(--ds-space-4) 0; }
.sum-app .sk-block { height: 54px; margin: 10px 0; border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; }
.sum-app .sk-w40 { width: 40%; }
.sum-app .sk-w60 { width: 60%; }
/* @keyframes sk-shimmer já declarado na seção de Informativos STJ acima —
   mesmo nome de animação nas duas folhas antigas, uma única declaração serve
   às duas páginas (cada uma carrega este arquivo inteiro). */
/* Reduced-motion do shimmer — ver nota completa na seção de Informativos STJ
   acima (mesmo motivo: duração literal, não coberta pelo reset de tokens). */
@media (prefers-reduced-motion: reduce) {
    .sum-app .sk { animation: none; }
}

.sum-app .foot { text-align: center; color: var(--ds-text-faint); font-size: var(--ds-text-xs); margin-top: var(--ds-space-9); } /* ver nota em .stj-app .foot */

/* Toque >= 44px e coluna única em telas estreitas */
@media (max-width: 375px) {
    .sum-app .filters { flex-direction: column; align-items: stretch; }
    .sum-app .filters select { width: 100%; }
    .sum-app .count { margin-left: 0; text-align: center; }
    .sum-app .links a,
    .sum-app .sum-btn { min-height: 44px; }
}


/* =====================================================================
   CONTADOR DE RESULTADOS EM TELA ESTREITA
   =====================================================================
   `.count` é uma pílula com `white-space: nowrap` — o texto que o JS
   escreve nela ("N resultados · dica de refino") não cabe numa linha
   abaixo de ~640px e empurrava a página inteira para a rolagem
   horizontal: medido em 97px de estouro a 360px em /sumulas.

   O defeito NÃO nasceu nesta migração: dpmg-sumulas.css tinha o mesmo
   `nowrap`, e o bloco de 375px que ele trazia só reposicionava a pílula
   (`margin-left: 0; text-align: center`), sem deixá-la quebrar. Corrigido
   aqui porque esta folha é a que passa a responder pelas duas buscas.

   `nowrap` continua valendo no desktop, onde é ele que impede a pílula de
   se partir no meio ao lado dos filtros.
   ===================================================================== */
@media (max-width: 640px) {
    .stj-app .count,
    .sum-app .count {
        white-space: normal;
        overflow-wrap: anywhere;
        min-width: 0;
    }
}