/* Jurimetrando — sóbrio; modo dia por omissão, modo escuro pelo sistema ou pelo botão (data-theme).
   Só fontes do sistema (nenhum pedido a terceiros além do Turnstile). */
:root {
  color-scheme: light;
  --fundo: #f7f7f4;
  --papel: #ffffff;
  --tinta: #1d232b;
  --suave: #5c6470;
  --fio: #dedcd5;
  --fio-forte: #c9c6bc;
  --acento: #1f4e79;
  --acento-escuro: #173c5e;
  --acento-claro: #e8eef5;
  --botao: #1f4e79;
  --botao-hover: #173c5e;
  --botao-texto: #ffffff;
  --erro: #9b2c2c;
  --erro-fundo: #fbeeee;
  --logo-dia: inline;
  --logo-noite: none;
  --raio: 6px;
  --largura-lateral: 16rem;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #14171b; --papel: #1c2026; --tinta: #e7e9ec; --suave: #9ea6b0; --fio: #2b3138; --fio-forte: #3b434c;
    --acento: #8db9e6; --acento-escuro: #b3d1f0; --acento-claro: #1e2a37;
    --botao: #2e6aa6; --botao-hover: #3a7bbd; --botao-texto: #ffffff; --erro: #f2a7a7; --erro-fundo: #3a2023;
    --logo-dia: none; --logo-noite: inline;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #14171b; --papel: #1c2026; --tinta: #e7e9ec; --suave: #9ea6b0; --fio: #2b3138; --fio-forte: #3b434c;
  --acento: #8db9e6; --acento-escuro: #b3d1f0; --acento-claro: #1e2a37;
  --botao: #2e6aa6; --botao-hover: #3a7bbd; --botao-texto: #ffffff; --erro: #f2a7a7; --erro-fundo: #3a2023;
  --logo-dia: none; --logo-noite: inline;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--tinta);
  font: 1rem/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--acento); }
a:hover { color: var(--acento-escuro); }
h1, h2 { text-wrap: balance; line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; font-weight: 650; }
h2 { font-size: 1.15rem; font-weight: 650; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -999px; top: 0; background: var(--papel); padding: .5rem 1rem; }
.salto:focus { left: 1rem; z-index: 10; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* topo */
.topo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
  padding: 1rem 1.5rem .85rem; background: var(--papel); border-bottom: 1px solid var(--fio);
}
.marca { display: inline-flex; line-height: 0; }
.marca img { height: 3.4rem; width: auto; max-width: 100%; }
.marca .logo-dia { display: var(--logo-dia); }
.marca .logo-noite { display: var(--logo-noite); }
.lema { color: var(--suave); font-size: .9rem; }
.tema {
  position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
  background: transparent; color: var(--suave); border: 1px solid var(--fio-forte); padding: .35rem .8rem; font-size: .85rem; font-weight: 500;
}
.tema:hover { background: var(--acento-claro); color: var(--tinta); }

/* corpo: lateral + central */
.corpo {
  flex: 1; display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr);
  gap: 2rem; width: 100%; max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem; align-content: start;
}
.lateral { min-width: 0; }
.opcoes {
  position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: .35rem;
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); padding: 1.1rem;
}
.opcoes h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: .4rem; }
.opcoes label, .opcoes legend { font-size: .9rem; font-weight: 600; }
.opcoes select { margin-bottom: .8rem; }
fieldset { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .2rem; }
legend { padding: 0; margin-bottom: .25rem; }
label.opcao { font-weight: 400 !important; display: flex; align-items: center; gap: .45rem; cursor: pointer; }
select, textarea, button { font: inherit; color: inherit; }
select {
  width: 100%; padding: .45rem .5rem; background: var(--papel);
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
}
.nota { color: var(--suave); font-size: .85rem; margin: .4rem 0 0; }

.central { min-width: 0; display: flex; flex-direction: column; gap: 2rem; }
.pergunta, .resposta, .instrucoes {
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); padding: 1.5rem;
}
.ajuda { color: var(--suave); margin: 0 0 1rem; max-width: 65ch; }
textarea {
  width: 100%; resize: vertical; min-height: 7.5rem; padding: .75rem .85rem; line-height: 1.5;
  background: var(--papel); border: 1px solid var(--fio-forte); border-radius: var(--raio);
}
textarea:focus { border-color: var(--acento); }
.linha-envio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
button {
  cursor: pointer; border-radius: var(--raio); padding: .65rem 1.3rem; font-weight: 600;
  background: var(--botao); color: var(--botao-texto); border: 1px solid var(--botao);
}
button:hover { background: var(--botao-hover); }
button:disabled { opacity: .55; cursor: not-allowed; }
.estado { min-height: 1.4rem; margin: .8rem 0 0; color: var(--suave); font-size: .95rem; }
.estado.erro { color: var(--erro); background: var(--erro-fundo); padding: .5rem .75rem; border-radius: var(--raio); }

/* resposta */
.resposta-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.resumo { color: var(--suave); margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.baixar { background: var(--papel); color: var(--acento); border-color: var(--acento); }
.baixar:hover { background: var(--acento-claro); color: var(--acento-escuro); }
.lista { list-style: none; margin: 0; padding: 0; counter-reset: voto; }
.lista li { counter-increment: voto; border-top: 1px solid var(--fio); padding: 1rem 0; }
.lista li:first-child { border-top: 0; padding-top: 0; }
.cab { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .9rem; color: var(--suave); font-variant-numeric: tabular-nums; margin-bottom: .4rem; }
.cab::before { content: counter(voto) "."; color: var(--tinta); font-weight: 700; }
.cab .num { color: var(--tinta); font-weight: 600; }
.trecho { margin: 0; max-width: 75ch; white-space: pre-line; }
.rotulo { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.ementa { margin-bottom: .75rem; }
.ementa .trecho { color: var(--suave); font-size: .95rem; }
.destaque { border-left: 3px solid var(--acento); background: var(--acento-claro); border-radius: 0 var(--raio) var(--raio) 0; padding: .7rem .9rem; }
.destaque .rotulo { color: var(--acento); }
.trecho.fechado { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mais { background: none; border: 0; color: var(--acento); padding: .25rem 0; font-weight: 600; font-size: .9rem; }
.mais:hover { background: none; text-decoration: underline; }

.instrucoes ol { margin: .5rem 0 0; padding-left: 1.3rem; max-width: 70ch; }
.instrucoes li { margin-bottom: .5rem; }

/* páginas de texto (privacidade, termos, faq, contato) */
.texto { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem; width: 100%; flex: 1; }
.texto article { background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); padding: 1.75rem; }
.texto h2 { margin-top: 1.5rem; }
.texto p, .texto li { max-width: 65ch; }
.texto .data { color: var(--suave); font-size: .9rem; }
.texto dt { font-weight: 650; margin-top: 1.1rem; }
.texto dd { margin: .25rem 0 0; }
.copia { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--fundo); border: 1px solid var(--fio); border-radius: var(--raio); padding: .5rem .75rem; }
.copia code { font-size: 1rem; user-select: all; }
.copia button { padding: .3rem .8rem; font-size: .85rem; }

/* rodapé */
.rodape {
  background: var(--papel); border-top: 1px solid var(--fio); padding: 1.1rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  font-size: .9rem; color: var(--suave);
}
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.rodape p { margin: 0; }

@media (max-width: 52rem) {
  .corpo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 1rem; }
  .opcoes { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .opcoes h2, .opcoes .nota { grid-column: 1 / -1; }
  .opcoes fieldset { grid-row: span 2; }
  .topo, .rodape { padding-left: 1rem; padding-right: 1rem; }
  .tema { position: static; transform: none; margin-top: .3rem; }
  .pergunta, .resposta, .instrucoes { padding: 1.1rem; }
  .texto { padding: 1.25rem 1rem; }
}
@media (max-width: 30rem) {
  .opcoes { display: flex; }
  .linha-envio { flex-direction: column; align-items: stretch; }
}