/* Termos de uso: uma coluna de leitura dentro da moldura de sempre. */

/* A grade das telas de dados tem linhas de altura fixa (foi feita para caber
   numa tela só) e a página não rola no computador. Aqui o painel ocupa a
   altura toda e o TEXTO rola dentro dele — rolar a página faria o texto
   passar por baixo da barra do topo, que é transparente. No celular a grade
   já é solta e a página rola inteira (styles.css). */
.board.termos {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.doc { min-height: 0; }

.doc__body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(150 180 255 / 0.35) transparent;
}

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .board.termos { grid-template-rows: none; }
  .doc__body { overflow-y: visible; }
}

.doc { max-width: 880px; width: 100%; margin: 0 auto; }

.doc__body {
  font-family: var(--font-serif);
  font-size: max(15px, calc(19 * var(--u)));
  line-height: 1.6;
  color: var(--ink-1);
}

.doc__body h2 {
  margin: 1.6em 0 0.5em;
  font-size: 1.15em;
  font-weight: 500;
  color: var(--ink-0);
}

.doc__body p,
.doc__body ul { margin: 0 0 0.9em; }

.doc__body ul { padding-left: 1.2em; }

.doc__body li { margin-bottom: 0.45em; }

.doc__body strong { font-weight: 500; color: var(--ink-0); }

.doc__versao {
  font-size: 0.85em;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* o que o dono ainda precisa preencher antes de publicar */
.pendente {
  padding: 0 0.25em;
  border-radius: 4px;
  background: rgb(226 196 141 / 0.18);
  color: var(--founder);
}

.doc__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: max(10px, calc(14 * var(--u))) max(18px, calc(26 * var(--u)));
  margin-top: max(26px, calc(34 * var(--u)));
  padding-top: max(14px, calc(18 * var(--u)));
  border-top: 1px solid rgb(170 195 255 / 0.16);
  font-size: max(14px, calc(17 * var(--u)));
}