/* As páginas da sessão de estudo, fase 8B: `/estudar/`, a sessão curta de um
 * item, o fim da sessão e `/revisoes/`, sobre as telas "estudar", "item",
 * "fim" e "revisoes" do mock de 12/09. Só o que a concha e os componentes não
 * têm. Tokens de `tokens.css`, valores em píxel do mock.
 */

.es-pagina { max-width: var(--coluna); }
.es-primeiro { margin-top: 14px; }
.es-apoio-colado { margin: 6px 0 0; }
.es-fila { display: flex; flex-direction: column; }
.es-conta { margin-top: 12px; }
.es-conta-curta { margin-top: 8px; }
.es-espaco { margin-top: 12px; }
.es-nota { font-size: 13px; margin-top: 16px; }
/* A refutação da decisão 34, parte 3, na abertura da sessão do dia: texto de
 * apoio com a régua de leitura da coluna, e nada de caixa colorida, porque não
 * é aviso nem celebração. */
.es-refutacao { margin-top: 12px; max-width: 38em; }
/* Decisão 34, parte 4: o acumulado do resumo, linha de apoio e nada mais. */
.es-acumulado { margin-top: 12px; font-variant-numeric: tabular-nums; }

/* A linha em azul do item que subiu, `.celebra` do mock: o azul da marca é a
 * cor de tudo o que celebra, decisão 10. */
.es-celebra {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin: 12px 0 12px;
}
.es-celebra-ponto { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--brand); }

/* O rodapé da questão dentro da sessão: posição, próxima, pular e encerrar. */
.es-sessao-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 .75rem;
  font-size: .8125rem;
  color: var(--text-2);
}
.es-sessao-topo a { color: var(--brand); }
.es-sessao-passos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: 1rem 0 0;
}
.es-sessao-passos .pv-largo, .es-sessao-passos noscript, .es-sessao-passos form:only-of-type { grid-column: 1 / -1; }
.es-sessao-passos button.pv-secundario { width: 100%; }

/* 8c.2: o texto de apoio já visto na sessão, recolhido atrás de um summary
 * com o piso de toque. Aberto, é o mesmo bloco `.q-contexto` da questão. */
.es-texto-visto > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: var(--toque);
  cursor: pointer;
  list-style: none;
}
.es-texto-visto > summary::-webkit-details-marker { display: none; }
.es-texto-visto-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.es-texto-visto-titulo { font-weight: 600; flex: 1 1 100%; }
.es-texto-visto-abrir { color: var(--brand); font-size: .875rem; font-weight: 600; }
.es-texto-visto[open] .es-texto-visto-abrir { display: none; }
.es-texto-visto[open] > summary { margin-bottom: .75rem; }