/* ============================================================================
   Termo de Compromisso Institucional — leitura e adesão.

   Folha própria porque o modo de leitura é de documento jurídico: sumário
   ao lado, medida estreita, hierarquia de seção e compromisso. Carrega
   depois de `letramento.css`, de quem reaproveita o olho e a medida.
   ========================================================================== */

.termo-pagina { max-inline-size: 72rem; }

.termo-grade { display: grid; gap: var(--space-8); }

@media (min-width: 1000px) {
  /* O sumário fica ao lado e acompanha a rolagem: são 6 seções e 11
     compromissos, e rolar às cegas um documento que se precisa declarar ter
     compreendido é o oposto do que a Política §4 pede. */
  .termo-grade { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--space-12); }
  .termo-sumario { position: sticky; top: var(--space-6); align-self: start; }
}

/* O `<details>` nasce **fechado**, e quem o abre no desktop é o CSS.
   O contrário — nascer aberto e fechar no celular — não existe: nenhuma
   regra de CSS fecha um `<details>`, e as dezessete linhas do índice
   ocupavam a primeira tela inteira do celular antes da primeira palavra do
   documento. É o mesmo defeito que o bloco de filtros da vitrine teve.

   `::details-content` é recente (Chrome 131, Safari 18.4, Firefox 139), e
   por isso o `@supports`: onde ele não existe, o resumo continua visível no
   desktop e o índice abre com um clique. Esconder o resumo sem poder abrir o
   conteúdo deixaria o índice inalcançável. */
@supports selector(::details-content) {
  @media (min-width: 1000px) {
    .termo-sumario-caixa > summary { display: none; }
    .termo-sumario-caixa::details-content {
      content-visibility: visible;
      block-size: auto;
    }
  }
}

.termo-sumario-caixa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.termo-sumario-caixa > summary {
  font-weight: 700;
  cursor: pointer;
  font-size: .9375rem;
  /* A quantidade fica no resumo fechado: "Neste documento" sozinho não diz
     se vale a pena abrir. Mesma razão do resumo das caixas de acolhimento. */
  list-style-position: inside;
}
.termo-sumario ol {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: .875rem;
  line-height: 1.4;
}
.termo-sumario li { margin-block: var(--space-2); }
.termo-sumario a { color: var(--muted); text-decoration: none; }
.termo-sumario a:hover,
.termo-sumario a:focus-visible { color: var(--brand-violet-deep); text-decoration: underline; }
/* O recuo distingue compromisso de seção sem precisar de rótulo. */
.termo-sumario-n3 { padding-inline-start: var(--space-4); }

/* --- o documento --------------------------------------------------------- */

.termo-texto { max-inline-size: 60ch; }
.termo-texto h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-block: var(--space-6) var(--space-2); }
.termo-texto .termo-subtitulo { color: var(--muted); font-size: 1.0625rem; margin-bottom: var(--space-8); }

.termo-texto h2 {
  font-size: 1.25rem;
  margin-block: var(--space-10) var(--space-4);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--line);
}
/* O compromisso é a unidade que se cita ("veja o Compromisso 4"), então
   ganha marca própria à esquerda em vez de virar só um título menor. */
.termo-texto h3 {
  font-size: 1.0625rem;
  margin-block: var(--space-8) var(--space-3);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--brand-violet);
  color: var(--brand-violet-deep);
}
.termo-texto p { line-height: 1.7; margin-bottom: var(--space-4); }
.termo-texto ul { margin-block: var(--space-4); padding-inline-start: var(--space-6); }
.termo-texto li { line-height: 1.6; margin-bottom: var(--space-2); }

/* Âncora não pode nascer atrás do cabeçalho fixo: sem isto, clicar no
   sumário leva ao título e o esconde. */
.termo-texto h2, .termo-texto h3 { scroll-margin-top: var(--space-8); }

.termo-divisor { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-12); }

/* --- adesão -------------------------------------------------------------- */

.termo-adesao { max-inline-size: 48rem; scroll-margin-top: var(--space-8); }

.termo-pendencias { margin: var(--space-3) 0; padding-inline-start: var(--space-6); }
.termo-pendencias li { margin-bottom: var(--space-2); }


/* --- comprovante --------------------------------------------------------- */

.comprovante { margin-block: var(--space-8); }
.comprovante > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 720px) {
  .comprovante > div { grid-template-columns: 16rem 1fr; gap: var(--space-4); }
}
/* A última linha não leva filete: ele fica solto, sem nada embaixo para
   separar. */
.comprovante > div:last-child { border-block-end: 0; }
.comprovante dt { color: var(--muted); font-size: .9375rem; }
.comprovante dd { margin: 0; font-weight: 700; }
/* O hash tem 64 caracteres e precisa quebrar: sem `anywhere` ele estoura a
   caixa no celular e some para fora da tela. */
.comprovante-hash {
  font-family: Consolas, Menlo, monospace;
  font-size: .8125rem;
  font-weight: 400 !important;
  overflow-wrap: anywhere;
  color: var(--muted);
}

/* O texto do Termo é editado em Markdown leve, e os marcadores (`#`, `##`,
   `###`) só se distinguem de relance em largura fixa. Numa fonte
   proporcional, `## 2.` e `### COMPROMISSO` começam no mesmo lugar. */
.campo-marcacao {
  font-family: Consolas, Menlo, monospace;
  font-size: .875rem;
  line-height: 1.6;
  tab-size: 2;
}