/* Os dois documentos legais: os termos de uso e a política de privacidade.
 *
 * Folha de página, como `home.css` e `questoes.css`, e não componente: as duas
 * páginas são texto corrido longo, e nenhuma outra do site é. Decisão 12.2:
 * toda cor vem do `tokens.css`, e por isso o tema escuro acompanha sozinho.
 *
 * A medida da linha é a `--coluna` da concha, que já é a de leitura. O que
 * esta folha acrescenta é o ritmo vertical do texto longo, a tabela que rola
 * sozinha no celular e a marca do dado que ainda falta.
 */

.doc { padding-bottom: 1rem; }

.doc-data {
  font-size: .8125rem;
  color: var(--text-3);
  margin: -.4rem 0 1.6rem;
}

.doc h2 {
  font: 600 1.125rem/1.35 var(--sans);
  color: var(--text);
  margin: 2.2rem 0 .7rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4rem; }
.doc h2 .doc-numero { color: var(--text-3); font-variant-numeric: tabular-nums; }

.doc p {
  margin: 0 0 .9rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}
.doc p strong { font-weight: 600; }
.doc a { color: var(--brand); }

/* O dado que o autor ainda não preencheu. Aparece marcado, e não some: a
 * `aluno/identificacao.py` explica por que documento incompleto se declara. */
.doc-falta {
  background: var(--amber-soft);
  border-bottom: 1.5px dashed var(--amber);
  color: var(--amber);
  font-size: .9375rem;
  padding: 0 .2rem;
  white-space: nowrap;
}

/* A tabela do "o que guardamos". Rola dentro de si mesma no celular, para a
 * página nunca rolar de lado. */
.doc-rolagem { overflow-x: auto; margin: 0 0 1.2rem; }
.doc-tabela {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .875rem;
}
.doc-tabela th, .doc-tabela td {
  text-align: left;
  vertical-align: top;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
}
.doc-tabela th {
  font: 600 .6875rem var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom-color: var(--line-2);
  white-space: nowrap;
}
.doc-tabela td { color: var(--text-2); }
.doc-tabela td:first-child { color: var(--text); }

/* No celular a tabela de quatro colunas não cabe, e rolar de lado dentro dela
 * é leitura ruim para documento que se lê inteiro. Abaixo de 640 px cada linha
 * vira um bloco, e o rótulo da coluna passa a encabeçar a célula, escrito pelo
 * `data-rotulo` do gabarito. Nada some, e a página continua sem rolagem
 * lateral. */
@media (max-width: 640px) {
  .doc-rolagem { overflow-x: visible; }
  .doc-tabela { min-width: 0; display: block; }
  .doc-tabela thead { display: none; }
  .doc-tabela tbody, .doc-tabela tr, .doc-tabela td { display: block; }
  .doc-tabela tr { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .doc-tabela td { border: 0; padding: .2rem 0; }
  .doc-tabela td::before {
    content: attr(data-rotulo);
    display: block;
    font: 600 .625rem var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .doc-tabela td:first-child { font-weight: 500; }
}

/* O par de atalhos para o que já funciona em /conta/, na política. */
.doc-direitos { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; }
.doc-direitos a {
  border: 1px solid var(--brand-borda);
  background: var(--brand-tint);
  border-radius: var(--r);
  padding: .5rem .8rem;
  min-height: var(--toque);
  display: flex; align-items: center;
  font-size: .9375rem;
}

@media (min-width: 1024px) {
  .doc h2 { font-size: 1.375rem; margin-top: 2.6rem; }
  .doc p { font-size: 1.0625rem; }
  .doc-tabela { font-size: .9375rem; }
}