/* SEELE · a tela de entrada (`#tela-boot`).
   Só o que esta tela usa. O cartão em volta (`.boot`, `.boot-marca`), os campos,
   as notas e os botões são de `base.css`, que carrega antes — e é a ordem que faz
   `.visitados-titulo` ganhar de `.rotulo` no elemento que tem as duas classes. */

.boot-form { display: flex; flex-direction: column; gap: 16px; }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo-linha { flex-direction: row; align-items: center; gap: 8px; }

/* O convite é o único campo com a borda acesa. Os outros dois são o caminho de
   quem não recebeu link nenhum, e uma coluna inteira de bordas laranja não
   apontaria para lugar algum. */
.campo-convite input { border-color: var(--seele-laranja-nerv); }

/* `pre-line` porque dois destes erros carregam duas impressões digitais para
   uma pessoa comparar — a chave que mudou (ADR 0003) e o convite que não leva a
   este servidor. Sem a quebra as duas refluem no mesmo parágrafo, que é exatamente
   a forma em que a comparação não acontece; `anywhere` porque são 64 caracteres
   sem espaço nenhum onde quebrar. */
.erro {
  margin: 16px 0 0;
  color: var(--seele-vermelho-alerta);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* O andamento da chegada, entre o formulário e o erro. Em fósforo e não em
   vermelho porque não é falha nenhuma: é a travessia acontecendo, e ela ocupa
   o lugar que o erro ocuparia se ela terminasse mal. Uma linha só — o texto
   vem de `ETAPAS`, que o guarda de comprimento já segura. */
.etapa {
  margin: 16px 0 0;
  color: var(--seele-fosforo);
}

/* ---- onde você já esteve ----
   Acima do formulário porque é o caminho mais curto para a maioria: quem abre o
   app quase sempre volta para onde já foi. Fica escondida enquanto a lista está
   vazia, e a tela de entrada é então exatamente a de antes desta seção existir. */
.visitados { margin-bottom: 32px; }

.visitados-titulo {
  margin: 0 0 8px;
  font: inherit;
  font-size: var(--seele-t-rotulo);
  font-weight: normal;
}

.lista-visitados { list-style: none; margin: 0; padding: 0; }

.visitados .nota { margin: 8px 0 0; }

.visitado {
  display: flex;
  align-items: baseline;
  gap: 8px;
  height: 24px;
}

/* O endereço inteiro é o alvo do clique, e não um ícone ao lado: o que se quer
   apertar é o nome do lugar. */
.visitado-ir {
  font: inherit;
  color: var(--seele-osso);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: start;
}

.visitado-ir:hover { color: var(--seele-laranja-nerv); }
.visitado-ir:focus-visible { outline: 1px solid var(--seele-laranja-nerv); outline-offset: 2px; }

.visitado-apelido, .visitado-quando {
  font-size: var(--seele-t-rotulo);
  color: var(--seele-osso-apagado);
}

/* Esquecer só aparece quando a linha é apontada: uma lista de atalhos com um
   botão de apagar em cada linha é uma lista que se olha com cuidado. */
.visitado .botao-fantasma { opacity: 0; }
.visitado:hover .botao-fantasma,
.visitado:focus-within .botao-fantasma { opacity: 1; }

/* ---- a sequência de inicialização ----
   A coluna da esquerda é a marca e o que o produto é: assinatura, três fatos,
   uma linha de posicionamento, o glossário e o atalho da ajuda. O que **é**
   layout aqui (a grade de colunas, os paddings, os gaps) continua em múltiplos
   de 8. */

.boot-grade {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 460px;
  min-height: 0;
}

.boot-sequencia {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 64px 32px;
  border-right: 1px solid var(--seele-linha);
  overflow: auto;
}

/* A coordenada do A·01 é a única que flutua: as outras encabeçam um painel com
   borda, e esta paira sobre a coluna aberta. */
.coordenada-solta { position: absolute; top: 16px; left: 64px; }

/* A hachura da borda esquerda. O passo de 16px é a altura de célula, e é a
   única coisa do desenho decorativo desta tela que a respeita. */
.hachura {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  border-right: 1px solid var(--seele-linha);
  background: repeating-linear-gradient(
    180deg,
    var(--seele-linha) 0 1px,
    transparent 1px 16px
  );
}

/* 560px é medida de leitura, não de coluna: o glossário e a linha do atalho são
   as duas frases desta tela que se leem em caixa baixa, e uma coluna aberta as
   deixaria com 120 caracteres de largura. */
.boot-corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 560px;
}

/* O símbolo e o nome lado a lado. `base.css` empilha `.boot-marca` porque lá
   ela é o cartão centrado do fim de sessão; aqui a assinatura é horizontal. */
.boot-corpo .boot-marca {
  margin: 0;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

/* A régua tripla do frame original: dois traços de borda e um terceiro feito de
   sombra deslocada. `specs/07` proíbe sombra como profundidade; esta não é
   profundidade, é o terceiro traço — cor plana, deslocamento inteiro, zero
   desfoque. Herda a cor de quem a hospeda, como no comp. */
.regua-tripla {
  display: block;
  align-self: stretch;
  height: 5px;
  color: var(--seele-laranja-nerv);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  box-shadow: 0 3px 0 -1px currentColor;
}

.boot-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--seele-t-corpo);
  letter-spacing: 0.16em;
  color: var(--seele-laranja-nerv);
}

.boot-sistema {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--seele-rotulo-painel);
}

/* ---- o glossário ----
   Quatro termos numa grade de duas colunas: o termo alinha com o termo, e a
   definição com a definição. A borda esquerda é o que diz que os oito elementos
   são um bloco só — sem ela, quatro `<dt>` e quatro `<dd>` soltos no meio da
   coluna leem como oito parágrafos. */
.boot-glossario {
  margin: 0;
  padding: 0 0 0 16px;
  border-left: var(--seele-b-forte) solid var(--seele-linha-forte);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 16px;
}

.boot-glossario dt {
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-laranja-nerv);
}

.boot-glossario dd {
  margin: 0;
  line-height: 1.4;
  color: var(--seele-osso);
}

/* ---- o atalho da ajuda ----
   A camada de ajuda é onde a explicação do vocabulário passou a morar, e uma
   camada que ninguém sabe abrir é uma camada que não existe. Esta é a linha que
   a apresenta, e ela cabe aqui e em nenhuma tela de operação: aqui ninguém está
   no meio de nada. */
.boot-atalho {
  margin: 0;
  color: var(--seele-osso-apagado);
}

.boot-tecla {
  font: inherit;
  border: 1px solid var(--seele-linha-forte);
  padding: 0 6px;
  color: var(--seele-osso);
}

/* ---- a tentativa de conexão ----

   Aqui ficava o diagrama dos três: PERMISSIONS, MEDIA e PERSISTENCE em polígonos,
   com um selo `SEM MEDIDA` no meio. Os três eram pintados pelo mesmo
   `data-estado`, escrito pelo mesmo laço, porque relatavam o mesmo fato — e
   três nomes para um dado é cenário se passando por instrumento.

   Sobrou o dado: durante a conexão a pessoa precisa ver que algo acontece. A
   marca de texto dentro carrega o estado, porque `specs/06-clientes-gui.md`
   proíbe informação que só a cor sustente, e a pulsação só existe enquanto a
   tentativa dura. */

.boot-tentativa {
  flex: 0 0 auto;
  margin-top: 32px;
  display: flex;
  align-items: baseline;
  gap: var(--seele-e2);
}

.boot-tentativa-rotulo {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-rotulo-painel);
}

.boot-tentativa-marca {
  font-family: var(--seele-mono);
  font-size: 13px;
  font-weight: normal;
  color: var(--seele-osso-apagado);
}

/* Enquanto a tentativa dura, e só. `specs/07-estetica.md` só admite
   movimento que diagnostique: este para quando a conexão para. */
.boot-tentativa[data-estado="carga"] .boot-tentativa-marca {
  color: var(--seele-laranja-nerv);
  animation: boot-tentativa-pulso 1200ms ease-in-out infinite;
}

.boot-tentativa[data-estado="ok"] .boot-tentativa-marca {
  color: var(--seele-fosforo);
}

@keyframes boot-tentativa-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-tentativa[data-estado="carga"] .boot-tentativa-marca { animation: none; }
}

/* ---- B·01, a conexão ---- */

.boot-registro {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--seele-negro-painel);
}

.boot-registro > .coordenada {
  padding: 12px 16px;
  border-bottom: 1px solid var(--seele-linha);
  flex: 0 0 auto;
}

.registro-corpo { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; }

/* CONECTAR é a única coisa desta coluna que se aperta sem ler nada antes, e a
   cartela é o que diz isso sem uma segunda cor nem uma segunda borda. */
.boot-conectar {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.2em;
}

/* O divisor. O filete dos dois lados diz que o que vem embaixo é a outra saída,
   e não o passo seguinte do formulário — que é exatamente como um segundo botão
   embaixo do primeiro se lê sem ele. */
.boot-ou {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-rotulo-painel);
}

.boot-ou::before,
.boot-ou::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--seele-linha);
}

.boot-hospedar { width: 100%; }

.boot-nota-hospedar { margin-top: 8px; }

/* A engrenagem ao lado da palavra, e não no lugar dela: um glifo sozinho é uma
   adivinhação, e `docs/marca.md` já resolveu o argumento uma camada acima. Mais
   específico que `.server-entrada` de propósito — `tela-server.css` carrega
   depois desta folha, e um empate ali seria decidido pela ordem. */
.registro-corpo .server-entrada {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.boot-engrenagem { display: flex; }

/* Centrada porque a que ela explica é um botão de largura inteira e centrado, e
   uma nota alinhada à esquerda embaixo dele apontaria para a borda. */
.boot-nota-config {
  margin: 8px 0 0;
  text-align: center;
  color: var(--seele-osso-apagado);
}

/* ---------- o microfone bloqueado pelo sistema ----------

   A mesma moldura do bloco de permissão de tela, e é de propósito: os dois
   dizem «o sistema está impedindo isto», e dar duas aparências à mesma
   categoria de recado ensina a lê-los como coisas diferentes. */
.boot-microfone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 16px;
  border: var(--seele-b) solid var(--seele-laranja-nerv);
  background: var(--seele-laranja-carga);
}

.boot-microfone-diz {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: var(--seele-t-dado);
  letter-spacing: var(--seele-tracking-cartela);
  color: var(--seele-laranja-nerv);
}

/* ---------------------------------------------- a entrada da 0.9.0
 *
 * Os valores são os da comp, **por inteiro e não por diferença**. Escrever só
 * o que muda foi o defeito da primeira tentativa: `base.css` desenha um
 * `.boot-marca` empilhado para o cartão que a entrada e o fim dividem, e esta
 * folha acrescentou `align-items:center` por cima sem zerar o
 * `flex-direction:column` de lá. As duas regras têm a mesma especificidade,
 * então o que sobrou foi a soma das duas: coluna **e** centrado — símbolo em
 * cima, nome embaixo, tudo no meio. Nada disso está na comp, e ninguém
 * escreveu; caiu da mistura.
 *
 * Por isso cada bloco aqui declara todas as propriedades que usa, inclusive as
 * que por acaso já valeriam. Uma regra que só corrige a anterior depende dela
 * para estar certa, e é o tipo de acoplamento que só aparece na tela de quem
 * está usando. */

.boot-caixa {
  margin: auto;
  width: 480px;
  max-width: 100%;
  padding: 32px;
  border: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-painel);
}

/* Símbolo e nome lado a lado, com o nome e a assinatura empilhados ao lado
   dele: `display:flex;align-items:center;gap:20px` na comp, e o afastamento de
   40px até a leitura vem daqui e não de um `gap` do cartão — a comp dá um
   afastamento diferente a cada junta, e um `gap` só os igualaria todos. */
.boot-marca {
  margin: 0 0 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.boot-simbolo {
  display: block;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

.boot-marca-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* `docs/marca.md`, direção 1c: o símbolo é geometria e o nome é latino, na
   Saira Condensed que este app embarca. Laranja e não osso, e é a única
   aplicação da marca em que isso vale — esta tela é onde o produto se
   apresenta, e o par símbolo-nome é o assunto dela inteira. */
.boot-nome {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--seele-laranja-nerv);
}

.boot-marca-sub {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seele-rotulo-painel);
}

/* A leitura de boot: monoespaçada, sobre o negro absoluto e dentro de um
   filete. Ela não pisca nem rola — ver a nota no `index.html` sobre por que ela
   é verdade e não cenário. */
/* O propósito, antes de qualquer detalhe — U05.

   Ele abre a coluna porque é a resposta à única pergunta que alguém que nunca
   viu este programa tem: o que isto faz. A leitura de boot, que respondia «o
   que isto é por dentro», desceu para um `<details>`. */
.boot-proposito {
  margin: 0 0 24px;
  max-width: 46ch;
  font-size: var(--seele-t-corpo);
  line-height: 1.6;
  color: var(--seele-osso);
}

/* Os detalhes técnicos, recolhidos. Sem `::marker` próprio: o triângulo do
   navegador é o único desenho desta janela que já diz «isto abre». */
.boot-detalhes > summary {
  cursor: pointer;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  padding: 4px 0;
}

.boot-detalhes > summary:hover { color: var(--seele-laranja-nerv); }
.boot-detalhes > summary:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 2px;
}

.boot-leitura {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--seele-linha);
  background: var(--seele-negro-absoluto);
  overflow: hidden;
}

/* A primeira linha é o comando, e sai em fósforo; as do meio são o que ele
   respondeu, e saem apagadas. É a hierarquia da comp, e ela é a de um terminal
   de verdade — o que se digitou tem um brilho que o que voltou não tem.
 *
 * **Sem `white-space: nowrap`, e é uma diferença deliberada da comp.** Lá cada
 * linha tem uma largura em `ch` e um `overflow: hidden`, porque ela as
 * datilografa: a largura cresce de zero até o número de caracteres, e o corte é
 * o efeito. Nós não datilografamos — a leitura é verdade e não cenário, e
 * aparecer inteira de uma vez é o que ela deve fazer.
 *
 * Copiar o corte sem copiar a animação foi o que sobrou na primeira tentativa,
 * e o resultado foi a terceira linha terminando em «na primeira vis». Um texto
 * cortado numa tela que se apresenta é pior que um texto em duas linhas — e
 * pior ainda porque o corpo de fonte do sistema e o idioma mudam onde ele
 * corta, então ele estaria certo nesta máquina e errado na próxima. */
.boot-linha {
  display: block;
  font-family: var(--seele-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--seele-osso-apagado);
  white-space: normal;
}

.boot-linha:first-child { color: var(--seele-fosforo); }

.boot-linha-pronto {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--seele-laranja-nerv);
}

/* O cursor pisca, e é a única animação desta tela.
 *
 * `07-estetica.md`: movimento é diagnóstico, nunca decorativo — e este diz uma
 * coisa, que o programa está pronto e esperando. Sob `prefers-reduced-motion`
 * ele para **sem sumir**, que é a regra que a varredura já segue: parado ele
 * continua sendo o cursor. */
.boot-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--seele-laranja-nerv);
  animation: boot-cursor 1s steps(1) infinite;
}

@keyframes boot-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-cursor { animation: none; }
}

/* **Empilhadas, e não lado a lado.** A comp escreve `flex-direction:column`, e
   a razão está na leitura: as duas saídas não são um par a comparar em largura
   igual — `CONECTAR` é o que quase todo mundo quer, e `HOSPEDAR AQUI` é a
   outra coisa. Uma sob a outra, em largura inteira, é o que dá a primeira ao
   polegar e deixa a segunda visível sem competir. */
.boot-saidas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boot-saidas > button {
  width: 100%;
  letter-spacing: 0.22em;
  padding: 14px 16px;
}

/* O rodapé: quem você é, e os ajustes desta máquina. Separado por um filete
   porque é outra coisa — não é uma terceira saída. */
.boot-rodape {
  --seele-rodape-altura: 56px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--seele-linha);
}

/* Contornado, ao contrário do bloco do operador da sessão: lá ele é o cabeçalho
   de uma coluna e a moldura seria ruído; aqui ele divide a linha com a
   engrenagem, e sem moldura pareceria texto ao lado de um botão. A comp
   desenha os dois com o mesmo filete pela mesma razão. */
.boot-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  color: var(--seele-osso-apagado);
  background: none;
  border: 1px solid var(--seele-linha-forte);
  cursor: pointer;
}

#boot-perfil-nome { color: var(--seele-osso); }

.boot-perfil:hover {
  color: var(--seele-laranja-nerv);
  border-color: var(--seele-laranja-nerv);
}

.boot-perfil:hover .operador-inicial {
  color: var(--seele-laranja-nerv);
  border-color: var(--seele-laranja-nerv);
}

/* A engrenagem: **quadrada**, da altura do vizinho, com o glifo do mesmo corpo
   que ela tem na sessão.
 *
 * A comp escreve 44px de largura e deixa a altura vir do `stretch` do rodapé, o
 * que dá um retângulo de 44×56 — mais largo que o avatar de 32 ao lado e mais
 * alto que largo. Somado a isso, o `.botao-fantasma` de `base.css` tem corpo de
 * rótulo, e o glifo, medido em `em`, saía com 11px contra os 15px da mesma
 * engrenagem na sessão. Caixa maior e desenho menor ao mesmo tempo: «o botão de
 * configuração parece ser maior do que o de perfil, aí não fica uniforme».
 *
 * `--seele-alvo-toque` é a altura do bloco do perfil ao lado — avatar de 32 mais
 * os 10 de folga em cima e embaixo e os dois filetes. Escrita uma vez e usada
 * nos dois lugares, para as duas nunca mais divergirem. */
.boot-rodape > .botao-fantasma {
  width: var(--seele-rodape-altura);
  height: var(--seele-rodape-altura);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
}

.boot-rodape > .botao-fantasma .glifo { width: 1.15em; height: 1.15em; }


/* ----------------------------------------- as duas caixas que abrem na entrada
 *
 * O nome público (link com nome) e as versões lado a lado (ADR 0046). As duas
 * são `<details>` fechados: quem aperta HOSPEDAR AQUI quer hospedar, e nenhuma
 * das duas é o caminho comum. Fechadas, custam uma linha; abertas, estão
 * inteiras.
 *
 * `margin-inline: auto` com a mesma largura do bloco de botões acima para que
 * elas não flutuem soltas quando abrem. */
.boot-nome-publico {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  margin-top: 10px;
  text-align: left;
}

.boot-nome-publico > summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--seele-rotulo-painel);
  padding: 6px 0;
}

.boot-nome-publico > summary:hover { color: var(--seele-osso); }

.boot-nome-publico input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* **A lista rola, e isto não é enfeite.**
 *
 * Ela é preenchida com o que houver no depósito da máquina, e nada limita
 * quantas versões alguém acumula ao longo de dois anos de atualizações. Sem
 * altura máxima e sem rolagem, a partir de um certo número as linhas de baixo
 * deixam de existir: o `base.css` põe `overflow: hidden` no `body`, então nem a
 * janela rola atrás delas. Foi exatamente assim que as salas de voz sumiram
 * para quem tinha mais de uma tela cheia, e há um guarda em
 * `tests/frontend.rs` que cobra isto de toda lista vinda de fora.
 *
 * O teto em `em` e não em pixels: ele acompanha quem aumenta o corpo do texto
 * no sistema, que é justamente quem mais perde linha por corte. */
.boot-nome-publico .server-dispositivos {
  max-height: 14em;
  overflow-y: auto;
}

/* ---------- preparar o servidor ---------- */

/* **Os campos chegavam encostados, medidos em 0px entre os três.**
   `.server-campo` nasceu dentro do painel de CONFIGURAÇÕES, onde quem espaça
   os blocos é o pai: `.server-bloco-corpo` é flex com `gap: 16px`. A
   `.boot-caixa` é `display: block`, e reusar a classe trouxe o campo sem o pai
   que o espaçava — o rótulo IMAGEM encostava no campo de nome, e VERSÃO QUE VAI
   HOSPEDAR encostava no botão acima.

   O espaço é dado aqui e não no `.server-campo`: mexer nele mudaria o painel
   inteiro de CONFIGURAÇÕES, que não tem defeito nenhum. As margens de bloco
   colapsam com as do título e da nota, então o topo da tela não ganha folga
   dupla. */
/* **E ela rola.** O `body` é `overflow: hidden` e a `.tela` nasce
   `overflow-y: visible`: uma tela mais alta que a janela é cortada em silêncio,
   sem barra e sem nada que diga que há mais abaixo. A de entrada nunca chegou
   lá; esta chega com três campos e a lista de versões — medida em 758px de
   conteúdo contra 736px de janela, ou seja, já cortando o VOLTAR numa janela
   de tamanho comum.

   `margin: auto` da `.boot-caixa` centraliza enquanto cabe. Quando não cabe,
   `auto` em cima de um item que transborda come o topo, e é por isso que a
   margem vira `0` acima do mínimo: melhor a caixa encostar no alto e ser
   inteira do que ficar centrada e sem começo. */
#tela-preparar,
#tela-servidores,
#tela-boot {
  overflow-y: auto;
  /* **Centralizada, e cortada nunca.** `safe` é a palavra inteira desta regra:
     centraliza enquanto cabe e alinha ao topo quando não cabe, que é
     exatamente a diferença entre as duas coisas que se quer.

     A primeira tentativa foi `margin-block: 0` abaixo de 820px de altura, e
     estava errada: ela tirava a centralização de toda janela baixa, inclusive
     das que cabem com folga — a caixa grudava no topo sem motivo. O corte só
     acontece quando o conteúdo passa da janela, e é só aí que a centralização
     tem de ceder.

     As duas linhas são uma escada, e a ordem é a escada. `safe` é palavra
     recente do alinhamento de caixa: um motor que não a conhece descarta a
     declaração **inteira** e cairia no `flex-start` — a caixa grudada no topo,
     que é exatamente o defeito que esta regra conserta. Com `center` antes, ele
     fica com o comportamento de sempre; quem conhece `safe` fica com o melhor.
     Este binário roda no WebKit do sistema, e o sistema de quem usa não é
     escolha nossa. */
  justify-content: center;
  justify-content: safe center;
}

/* O `auto` vertical da `.boot-caixa` é justamente o que come o topo quando o
   conteúdo transborda, e é ele que `justify-content` substitui aqui. O
   horizontal fica: centrar de lado não corta nada. */
#tela-preparar .boot-caixa,
#tela-servidores .boot-caixa,
#tela-boot .boot-caixa {
  margin-block: 0;
  margin-inline: auto;
}

/* A de entrada tinha o mesmo defeito, e ele é anterior a esta tela: com os dois
   `<details>` abertos — quem tem um DNS apontado e mais de uma versão — são
   1074px de conteúdo. Numa janela de 560px o PERFIL e a engrenagem de
   CONFIGURAÇÕES ficavam fora do alcance, sem barra de rolagem e sem nada
   dizendo que havia mais embaixo. Medido, não deduzido. */

#tela-preparar .server-campo,
#tela-preparar .boot-saidas,
#tela-servidores .server-dispositivos,
#tela-servidores .boot-saidas {
  margin-top: 20px;
}

/* O par de botões fica separado dos campos por mais que os campos entre si:
   confirmar e voltar são a saída da tela, e não mais um campo dela. */
#tela-preparar .boot-saidas,
#tela-servidores .boot-saidas {
  margin-top: 28px;
}