/* Lei seca e súmulas (site/js/leiseca.js): a caixa com o texto oficial do artigo ou da súmula citada na anotação.
   Visual do Zero DP (docs/design.md): caixa do sistema (dialog.caixa), a lei na letra de leitura (Literata, que o
   base.css dá a .lei-artigo e .lei-sumula), o trecho citado em vinho suave com a barra rubi (e a frase "Em destaque":
   nunca só cor), avisos em .alerta com ícone. Só tokens. A citação dentro do caderno (.texto .lei) mora no app.css. */

/* ===== a caixa: cabeça fixa, o texto rola no meio, a fonte e os botões ficam embaixo ===== */
dialog.lei-cartao { width: min(100% - 32px, 620px); max-height: min(88dvh, 820px); overflow: hidden; }
@media (max-width: 560px) { dialog.lei-cartao { width: 100%; max-height: 92dvh; } } /* no celular é a folha que sobe (base.css) */
dialog.lei-cartao[open] { display: flex; flex-direction: column; }

.lei-topo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 14px 24px;
  border-bottom: var(--bw-fio) dashed var(--linha-media);
}
.lei-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.lei-titulo h2 { font-size: 21px; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.lei-titulo .etiqueta { flex: none; }
.lei-fechar { flex: none; }

.lei-corpo {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 14px;
  min-height: 120px;
  padding: 18px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.lei-corpo > * { min-width: 0; }
@media (max-width: 560px) {
  .lei-topo { padding-left: 18px; }
  .lei-corpo { padding: 16px 18px 20px; }
}

/* ===== o texto da lei: leitura longa ===== */
.lei-artigo + .lei-artigo { padding-top: 18px; border-top: var(--bw-fio) dashed var(--linha-media); }
.lei-u {
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--raio-1);
  color: var(--texto);
  font-size: 16.5px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.lei-u + .lei-u { margin-top: 4px; }
.lei-u.n1 { margin-left: 14px; }
.lei-u.n2 { margin-left: 28px; }
.lei-u.n3 { margin-left: 42px; }
@media (max-width: 480px) {
  .lei-u.n1 { margin-left: 8px; }
  .lei-u.n2 { margin-left: 16px; }
  .lei-u.n3 { margin-left: 24px; }
}
.lei-u.revogado { color: var(--texto-3); font-style: italic; }
/* o trecho citado: vinho suave + barra rubi à esquerda (e a frase "Em destaque" em cima) */
.lei-u.alvo { padding-left: 14px; background: var(--acento-suave); box-shadow: inset 4px 0 0 var(--rubi); scroll-margin: 40px; }
.lei-u.alvo-filho { padding-left: 14px; background: var(--superficie-2); box-shadow: inset 4px 0 0 var(--acento-linha); }

/* rubrica do artigo ("Dos direitos e deveres individuais") e a data da súmula: rótulo, não texto de lei */
.lei-rubrica { margin: 12px 0 4px; padding: 0 10px; color: var(--texto-3); font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.35; }
.lei-rubrica:first-child { margin-top: 0; }
.lei-rubrica.n1 { margin-left: 14px; }

.lei-citado { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 600; }
.lei-marca { flex: none; width: 20px; height: 14px; border-radius: 4px; background: var(--acento-suave); box-shadow: inset 4px 0 0 var(--rubi); }

/* "de qual lei é?" e "de qual tribunal?": a pergunta e os chips */
.lei-pergunta { color: var(--texto); font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lei-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.lei-fichas .chip { min-width: 60px; min-height: 44px; justify-content: center; cursor: pointer; }

/* ===== súmula ===== */
.lei-sumula {
  margin: 0;
  padding: 14px 16px 14px 18px;
  border-radius: var(--raio-2);
  background: var(--superficie-2);
  box-shadow: inset 4px 0 0 var(--rubi);
  color: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.lei-sumula.revogado { box-shadow: inset 4px 0 0 var(--erro); color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--erro); text-decoration-thickness: 2px; }
.lei-sumula + .lei-rubrica { margin-top: -4px; }

/* ===== rodapé: de onde veio o texto, o link oficial e "trocar a lei" ===== */
.lei-rodape {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 24px calc(18px + env(safe-area-inset-bottom));
  border-top: var(--bw-fio) dashed var(--linha-media);
  background: var(--superficie-2);
}
@media (max-width: 560px) { .lei-rodape { padding-inline: 18px; } }
.lei-rodape:empty { display: none; }
.lei-fonte { flex: 1 1 100%; color: var(--texto-3); font-size: 13.5px; line-height: 1.45; }
/* (o botão tem a borda de baixo por fora da caixa: o respiro embaixo é dela) */
.lei-acoes { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: var(--afunda); }
.lei-trocar { flex: 1 1 auto; min-width: 0; }
.lei-trocar[open] { flex-basis: 100%; }
.lei-trocar summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--acento);
  font-family: var(--fonte-titulo);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--acento-linha);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  list-style: none;
  cursor: pointer;
}
.lei-trocar summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .lei-trocar summary:hover { text-decoration-color: currentColor; } }
.lei-trocar[open] summary { margin-bottom: 6px; }

/* ===== estados ===== */
.lei-carregando { display: grid; justify-items: center; gap: 12px; padding: 28px 0; color: var(--texto-2); text-align: center; }
.lei-carregando .girando { width: 28px; height: 28px; }
.lei-alerta > div { display: grid; gap: 4px; min-width: 0; }
.lei-alerta .link-botao { justify-self: start; margin: 0 0 -8px -4px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { dialog.lei-cartao[open] { animation: none; } }
@media print { dialog.lei-cartao { display: none !important; } }

/* ===== selo do fundamento (seloLeiSeca): etiqueta pequena depois do "Fundamento:" na correção, no resultado, na peça
   e no verso do cartão de erro. Ganha da regra do ícone de .sim-fundamento/.pc-fundamento (18 px dourado). ===== */
.lei-selo-lugar { display: inline; margin-left: 6px; }
.lei-selo-lugar[hidden] { display: none; }
button.lei-selo { cursor: pointer; vertical-align: 1px; font-family: var(--fonte-titulo); }
button.lei-selo:hover { text-decoration: underline; text-underline-offset: 2px; }
.lei-selo.etiqueta .ic { flex: none; width: 13px; height: 13px; margin: 0; color: currentColor; }
span.lei-selo { vertical-align: 1px; }