/* SEELE — a tela de sessão encerrada (`#tela-fim`).
   O cartão é o mesmo da entrada e vive em `base.css`; o que muda é a cartela
   vermelha no lugar da assinatura, o motivo escrito abaixo dela e o par de
   saídas — RECONECTAR e, menor, SAIR.

   **O título tem nome próprio, e passou a ter por um defeito.** Ele se chamava
   `.boot-marca.fim` e herdava de um `.boot-marca` de `base.css` a margem de
   baixo — mas `.boot-marca`, na entrada, é o **contêiner** do símbolo e do
   nome, e este aqui é um `<h1>` de uma palavra. Duas coisas sem relação nenhuma
   atrás do mesmo nome: no dia em que a entrada da 0.9.0 mudou o seu para uma
   fileira, o título do fim virou uma fileira junto, e a margem de que ele
   dependia sumiu quando a regra de `base.css` deixou de existir. */

.fim-titulo {
  color: var(--seele-vermelho-alerta);
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  letter-spacing: var(--seele-tracking-cartela);
  font-size: 32px;
  line-height: 32px;
  display: block;
  margin: 0 0 32px;
}

/* Mesmo tratamento do `.erro` da entrada — `pre-line` e `overflow-wrap:
   anywhere` —, e a mesma razão: um motivo de queda pode trazer impressão
   digital, que são 64 caracteres sem espaço nenhum onde quebrar. Osso e não
   vermelho: aqui a sessão já acabou, e a cor de alerta é reservada ao que
   impede de entrar (`tokens.css:19`).

   Era um par de regras — `.erro, .fim-motivo` e depois `.fim-motivo` — e a
   segunda só existia para desfazer duas declarações da primeira. Separadas as
   duas telas, o valor resolvido é este: `margin: 16px 0 0` seguido de
   `margin-bottom: 32px` é `margin: 16px 0 32px`, e o vermelho nunca chegava a
   pintar nada. */
.fim-motivo {
  margin: 16px 0 32px;
  color: var(--seele-osso);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* A saída secundária, embaixo do RECONECTAR e visivelmente menor que ele.
   Um bloco próprio e não `inline`: os dois lado a lado dariam dois botões do
   mesmo peso, e o peso é o que diz qual dos dois é o caminho de volta.

   `margin-left: 0` desfaz o `margin-left: auto` de `.botao-fantasma`, que
   existe para empurrar o botão numa linha flex — aqui não há linha, e o `auto`
   de um bloco centraliza pela metade. */
.fim-sair {
  display: block;
  margin: 16px 0 0;
}