/* SEELE — a camada comum a toda tela.
   Consome `tokens.css`, congelado em M0.12 (ADR 0014). Nenhuma cor literal
   aparece aqui: se um valor não está nos tokens, ele não é do produto.

   Célula de terminal: 8px × 16px. Todo espaçamento é múltiplo de célula, e é o
   que mantém a resposta para "como isso ficaria em 80×24 monocromático?"
   — specs/06-clientes-gui.md.

   ---- o que mora aqui e o que não ----

   Aqui: a zeragem, a moldura, a tipografia, os primitivos de formulário e de
   botão, os glifos desenhados e a varredura. Ou seja, o que **mais de uma tela**
   usa. O que só uma tela usa mora em `tela-<nome>.css`, e é isso que permite
   quatro telas novas sem quatro pessoas editando o mesmo arquivo.

   ---- ordem de carga, e por que ela não é gosto ----

   `index.html` carrega, nesta ordem: `fontes.css`, `tokens.css`, este arquivo,
   as folhas de tela, e `acessibilidade.css` por último. Dividir uma folha
   reordena regras, e reordenar decide empates de especificidade. Duas
   dependências reais:

   - toda regra de tela que refina um primitivo daqui (`.busca .botao-fantasma`,
     `.compor input`, `.visitados-titulo` sobre `.rotulo`) precisa vir **depois**;
   - `acessibilidade.css` sobrescreve `.rotulo`, `.painel-titulo` e
     `.roster .pessoa` com a mesma especificidade, e só ganha por ser o último.

   `apps/seele-app/tests/frontend.rs` confere essa ordem. */

*, *::before, *::after { box-sizing: border-box; }

/* A altura da barra da janela, da comp da 0.9.0.
 *
 * **Aqui e não em `tokens.css`**, e a tentativa de pô-la lá foi recusada por um
 * guarda com razão: aquele arquivo é cópia literal de `design/seele-tokens.css`,
 * congelado no ADR 0014, e o `the_served_tokens_are_the_frozen_tokens` compara
 * os dois byte a byte. Uma medida de layout que este arquivo inventou não é um
 * token de design, e enfiá-la lá para ganhar uma variável seria descongelar a
 * palheta por conveniência.
 *
 * Os dois lugares que a leem — `.barra-janela` e o `calc` de `.tela` — moram
 * neste arquivo, então a variável aqui já os cobre. */
:root {
  --seele-barra-janela: 32px;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--seele-negro-absoluto);
  color: var(--seele-osso);
  font-family: var(--seele-mono);
  font-size: 13px;
  line-height: 16px;
  /* Zero border-radius e zero sombra em todo o arquivo: é regra de tema
     (specs/07-estetica.md), não gosto. */
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }

/* `100vh` menos a barra da janela, que a 0.9.0 pôs por cima de todas as telas.
 *
 * Uma variável e não o número solto: a barra tem 32px em `.barra-janela`, e
 * dois lugares com o mesmo número é um lugar para eles discordarem — o sintoma
 * seria uma tela 32px mais alta que a janela, com o rodapé de telemetria
 * cortado e nada dizendo por quê.
 *
 * `min-height` junto de `height` porque as telas são `flex` e o conteúdo delas
 * rola por dentro: sem o mínimo, um filho que cresce empurra a tela para fora
 * da janela em vez de rolar. */
.tela {
  height: calc(100vh - var(--seele-barra-janela));
  min-height: 0;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }

/* ---------- a tela que acabou de entrar ----------

   Toda `.tela` carrega `tabindex="-1"` e recebe o foco quando ela não nomeia um
   controle melhor em `data-foco` — é como o teclado atravessa uma troca de tela
   sem cair no `<body>`.

   O anel não aparece nessa pousada: `:focus-visible` é a heurística do
   navegador para "isto veio do teclado", e um contorno em volta da janela
   inteira toda vez que uma tela abre é ruído, não sinal — quem trocou de tela
   já sabe que trocou. Sob a heurística ele volta, e aí ele é a resposta a
   "onde eu estou?" de quem só tem o teclado.

   `linha-forte`, e não o osso de `.botao:focus-visible`: um anel de 100vh na
   cor mais clara da paleta compete com a tela que ele emoldura. Este é o único
   foco desta interface que cerca uma tela inteira em vez de um controle. */
.tela:focus { outline: none; }

.tela:focus-visible {
  outline: 2px solid var(--seele-linha-forte);
  outline-offset: -2px;
}

/* ---------- o que se lê e não se vê ----------

   A região viva que anuncia a troca de tela. Escondida do olho e nunca da
   árvore de acessibilidade: `display: none` e `visibility: hidden` tiram o
   elemento das duas, e um `role="status"` invisível **daquele** jeito é um
   `role="status"` que não anuncia nada.

   Um pixel recortado é a forma que sobra. Sem `width: 0`, que em alguns
   leitores derruba o nó junto; sem `text-indent` negativo, que arrasta a caixa
   de rolagem da página quando o texto é longo. */
.anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kanji { font-family: var(--seele-jp); }

/* 10px em caixa alta é texto pequeno pelo critério do WCAG, e por isso a cor sai
   de `--seele-rotulo-painel` e não de `osso-apagado` direto: aquele mede 4,11:1
   e vale só para texto grande. Ver o achado 3 de `docs/tokens-achados.md`. */
.rotulo {
  font-size: 10px;
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-rotulo-painel);
}

/* ---------- coordenada de painel ----------
   `A·01`, `B·02`, `C·02` — o nome de cada painel, na tipografia que o comp usa
   para eles: 9px, tracking de 0.2em.

   A cor sai de `--seele-rotulo-painel` e nunca de `osso-apagado` direto, e a
   diferença não é de estilo. `docs/tokens-achados.md` mede `osso-apagado` em
   4,11:1, que passa só como texto grande; título de painel é o que diz **qual**
   painel é aquele — informação necessária, em 9px. Passar por um nome semântico
   fez a correção do achado 3 caber em uma linha de `tokens.css` em vez de uma
   varredura por todas as folhas. */
.coordenada {
  margin: 0;
  font-size: var(--seele-t-micro);
  font-weight: normal;
  letter-spacing: 0.2em;
  color: var(--seele-rotulo-painel);
}

/* ---------- o valor que não existe ----------
   Metade do que o comp desenha não tem dado por trás (§16 do inventário do
   comp: 23 de ~48 valores). Onde não há fonte, a moldura fica e o valor falta,
   escrito com o travessão duplo — nunca com um número plausível, e nunca com um
   zero, que é uma medida como qualquer outra.

   `crates/seele-core/src/state.rs` guarda o outro lado desta mesma regra em
   `an_unmeasured_sync_ratio_reads_as_zero_and_not_as_perfect`: lá existe campo,
   e um campo sem medida vale zero porque zero é uma pergunta. Aqui não existe
   campo nenhum, e um zero seria indistinguível de uma medida de verdade. */
.ausente { color: var(--seele-osso-apagado); }

/* 9px, pela mesma razão que `.coordenada`: o travessão que diz "não existe" é a
   resposta à pergunta que o rótulo faz, e uma resposta ilegível é uma ausência. */
.legenda-ausente {
  margin: 0;
  font-size: var(--seele-t-micro);
  letter-spacing: 0.14em;
  color: var(--seele-rotulo-painel);
}

/* ---------- o cartão da entrada ----------
   `.boot` é o cartão centrado que `#tela-fim` usa, e que a tela de autenticação
   vai dividir amanhã.

   **`.boot-marca` saiu daqui.** Ele desenhava a marca empilhada, para o cartão
   compartilhado, e a entrada da 0.9.0 a quer lado a lado — então `tela-boot.css`
   passou a defini-la também. Duas folhas, a mesma classe, a mesma
   especificidade: o que valeu foi a soma das duas, e a marca saiu empilhada
   **e** centrada, que não é nenhuma das duas intenções. Hoje ela tem um
   usuário só, e a regra mora junto dele. */

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


/* ---------- campos e botões ----------
   Primitivos, e por isso comuns: a entrada e a sessão usam os dois. */

input[type="text"], input:not([type]) {
  width: 100%;
}

input {
  font: inherit;
  color: var(--seele-osso);
  background: var(--seele-negro-absoluto);
  border: 1px solid var(--seele-linha);
  padding: 8px;
}

input:focus {
  outline: none;
  border-color: var(--seele-laranja-nerv);
}

/* **Uma ação principal tem peso de ação principal** — U04.
 *
 * «Botões visualmente pouco diferenciados […] As ações principais parecem
 * controles auxiliares.» O campo sólido já separava primário de secundário; o
 * que faltava era **altura**: um botão de 8px de padding num texto de 10px dá
 * cerca de 30px de alvo, e um alvo de 30px é o que faz alguém errar o clique
 * numa lista de controles vizinhos.
 *
 * 40px medidos, e não declarados: a WCAG 2.2 pede 24×24 em AA e 44×44 em AAA.
 * Quarenta fica acima do primeiro e abaixo do segundo, e é o que cabe na
 * densidade desta casca sem empurrar as colunas. A auditoria pediu medida e
 * não conformidade — este comentário é a medida.
 *
 * `peso` forte pela mesma razão: o contraste de forma entre primário e
 * secundário é o campo sólido; o de leitura é o peso. */
.botao {
  font: inherit;
  font-weight: 700;
  letter-spacing: var(--seele-tracking-rotulo);
  min-height: 40px;
  padding: 8px 16px;
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
  border: 1px solid var(--seele-laranja-nerv);
  cursor: pointer;
}

/* Hospedar é a alternativa, não o caminho principal: quem abre o app quase
   sempre vai entrar num Server que já existe. Contorno em vez de campo sólido,
   sem virar um botão escondido. */
.botao-secundario {
  color: var(--seele-laranja-nerv);
  background: none;
}

/* ---------- o que deu errado ----------
   Comum desde que o Terminal Server passou a ter uma recusa própria para
   escrever: um microfone que sumiu entre desenhar a lista e clicar nela. Duas
   telas usam, então mora aqui.

   `pre-line` porque dois dos erros da entrada 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;
}

.botao:disabled { opacity: 0.5; cursor: default; }
.botao:focus-visible { outline: 2px solid var(--seele-osso); outline-offset: 2px; }

/* O secundário: mesmo alvo, peso menor.
 *
 * U04 pede variantes distinguíveis, e a distinção aqui é a que já existia —
 * contorno contra campo sólido. O que muda é o alvo: 2px de padding num texto
 * de 11px davam cerca de 20px de altura, abaixo do mínimo de 24 que a WCAG 2.2
 * fixa em AA. Trinta e dois medidos, com o corpo de dado no lugar do 11px solto
 * que não vinha de token nenhum. */
.botao-fantasma {
  margin-left: auto;
  font: inherit;
  font-size: var(--seele-t-dado);
  min-height: 32px;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  padding: 4px 10px;
  cursor: pointer;
}

/* ---------- os glifos desenhados ----------
   `docs/marca.md` explica o precedente: os katakana da marca estão em contorno
   porque como texto eles virariam Hiragino no macOS e Yu Gothic no Windows. O
   argumento é o mesmo aqui, uma camada abaixo. A IBM Plex Mono não traz
   `U+25B8`, `U+25C2`, `U+25BC`, `U+25B6`, `U+25CF`, `U+25CB` nem `U+2318` —
   conferido contra a face embarcada: 1049 entradas de cmap, e exatamente um
   glifo em `U+25A0`–`U+25CF`. Cada um deles caía na monoespaçada do sistema, o
   que punha uma segunda face no meio de uma linha numa interface monoespaçada.

   `ui/glifos.js` desenha os seis. A caixa é `1em` quadrada em toda ocorrência,
   e o tamanho ótico de cada figura é escolhido dentro do `viewBox` de 16 — um
   triângulo cheio pesa mais que a letra ao lado se for desenhado na altura de
   caixa alta, e `▸` e `●` não são coisas do mesmo peso.

   `vertical-align: -0.2em` põe o centro da caixa a `0.3em` da linha de base, que
   é o meio entre o centro da altura-x (`0.258em`) e o da caixa alta (`0.349em`)
   da IBM Plex Mono. Em todo lugar onde eles aparecem a entrelinha é 16px e a
   caixa cabe dentro da haste da linha, então nenhuma linha cresce.

   `fill` fica no CSS, e não no atributo, para que a cor continue vindo da regra
   que já pintava o caractere. As figuras vazadas trazem `fill="none"` como
   atributo de apresentação, que vence a herança sem vencer regra nenhuma. */

.glifo {
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
  fill: currentColor;
  /* **O glifo não é alvo de clique**, e isto é conserto de um defeito de campo
     no Windows: «quando clico no meio dos botões de microfone e de fone não
     funciona; precisa clicar no cantinho do botão».

     O centro de um `.operador-glifo` é o `<svg>`, e a borda é o `<button>`. Em
     Chromium o clique no `<svg>` borbulha até o botão e o ouvinte roda — foi o
     que o laboratório mostrou, e por isso o defeito não reproduz aqui. No
     WebView2 do Windows, não. Em vez de descobrir de que lado está a razão num
     motor que não tenho, tiro a pergunta do caminho: um ícone dentro de um botão
     não tem por que ser alvo de nada, e com `pointer-events: none` o alvo é
     sempre o botão, em qualquer motor.

     Ninguém depende do contrário: nenhum ouvinte desta casca inspeciona o
     `target` procurando um glifo. */
  pointer-events: none;
}

/* ---------- a varredura ----------
   O comp v2 declara `.magi-scan` e o keyframe `magiVarredura` e nunca liga um
   ao outro: o elemento está na página, a regra ficou solta. `docs/tokens-achados.md`
   registrou a lacuna e disse o preço de fechá-la — "se você quiser a varredura,
   ela vira exceção única e explícita ao tema". É o que ela é agora, e o ADR 0014
   é onde isso está escrito.

   Geometria do comp, seguida de perto: fixa, `inset: 0`, `z-index: 9`, e a
   mesma textura de duas em duas células verticais.

   `opacity` no elemento em vez de `rgba(0, 0, 0, 0.34)` porque nesta folha cor
   literal não entra (`tests/tokens.rs`). O negro absoluto sai de token.

   ---- por que 6% e não os 34% do comp ----

   Ela é a primeira coisa nesta interface que se põe *sobre* o texto: `inset: 0`
   e `z-index: 9` cobrem a janela inteira, então nas linhas escuras da textura o
   véu escurece o glifo e o fundo juntos, e contraste é razão — escurecer os dois
   não a preserva, derruba. Medido por WCAG 2.1 (luminância relativa sRGB),
   sobre `negro-painel`, que é o pior caso porque é a superfície mais clara:

   | token             | sem véu | véu 34% | véu 6% |
   |-------------------|---------|---------|--------|
   | `osso-apagado`    |  4,11:1 |  2,35:1 | 3,74:1 |
   | `vermelho-alerta` |  5,16:1 |  2,70:1 | 4,63:1 |
   | `laranja-nerv`    |  5,71:1 |  2,97:1 | 5,13:1 |

   A 34% não é só o `osso-apagado` — que `docs/tokens-achados.md` já registra
   reprovando AA e valendo só como texto grande — que piora: ele cai para 2,35:1
   e perde até o piso de 3:1 do texto grande. O `vermelho-alerta` cai para
   2,70:1, e ele é a cor cuja aprovação em AA o ADR 0014 usa como o argumento
   mais forte a favor da paleta v2. Uma textura decorativa desfazendo em silêncio
   a única correção de acessibilidade que a revisão da paleta trouxe é o preço
   que ninguém escolheu pagar.

   6% passa com folga, não é o teto: a `vermelho-alerta` chega a 4,63:1 ≥ 4,5 e a
   `osso-apagado` a 3,74:1 ≥ 3:1. O teto de verdade é α ≈ 7,55% — onde a
   `vermelho-alerta` cruza 4,5:1 e vira a primeira a reprovar; a 8% inteiro ela já
   está em 4,4630:1. 6% foi escolhido abaixo desse teto de propósito, para deixar
   margem. O que resta de custo está escrito em `docs/tokens-achados.md`: nenhum
   véu diferente de zero sai de graça, porque o véu apaga glifo e fundo ao mesmo
   tempo.

   E quase nada se perde de aparência, porque o véu é negro absoluto sobre um
   fundo de negro absoluto: em `html, body` a textura é **exatamente** um no-op
   em qualquer opacidade, e a única superfície onde ela chega a aparecer é o
   painel, que a 34% ia de (10 · 8 · 6) a (8,3 · 6,6 · 5,0) — menos de dois
   níveis de 255. A textura nunca foi visível onde deveria estar; ela era
   visível no texto. É isso que 6% devolve. */
.varredura {
  position: fixed;
  inset: 0;
  /* Ela cobre a janela inteira, inclusive todo botão. Sem isto o app fica
     bonito e inoperante. */
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    var(--seele-negro-absoluto) 2px 4px
  );
  opacity: 0.06;
}

/* A faixa que desce. Altura de 5vh porque é o que o keyframe do comp pede: de
   -100% a 2000% são 21 alturas de percurso, e a faixa só cruza uma tela inteira
   e sai se uma altura for um vinte avos da janela. */
.varredura::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5vh;
  background: linear-gradient(
    180deg,
    transparent,
    var(--seele-osso-apagado),
    transparent
  );
  /* `opacity` do pai multiplica a do filho, então isto é 0,68 × 0,06 ≈ **4%**
     de véu claro — o mesmo 4% que a faixa sempre teve, quando o par era
     0,12 × 0,34. O número ficou feio para que a aparência não mudasse: baixar o
     pai a 6% por contraste não é motivo para a faixa desbotar junto, porque ela
     clareia, e clarear não é o que estava derrubando a razão.

     `specs/07` chama movimento decorativo de erro; o que se negocia aqui é o
     quanto ele se faz notar, e a resposta é quase nada. */
  opacity: 0.68;
  animation: seele-varredura 7000ms linear infinite;
}

@keyframes seele-varredura {
  from { transform: translateY(-100%); }
  to   { transform: translateY(2000%); }
}

/* ---------- a nota ao lado de um controle ----------

   Uma linha curta ao lado de um controle, dizendo o que apertá-lo **causa**.
   Ela mora na marcação, ao lado do controle que explica, e não numa tabela
   paralela que alguém esquece de atualizar quando o controle muda.

   ---- não há interruptor, e a ausência é a decisão ----

   Isto foi a camada `LEGENDAS SIMPLES` do comp v3: `.dica`, escondida por
   omissão e revelada por `body.legendas-simples`, com uma chave no Terminal
   Server para desligá-la. A chave saiu e a classe mudou de nome junto, porque as
   duas eram a mesma suposição errada — a de que esta frase é ajuda para
   iniciante, e não parte do controle.

   Uma frase que diz o que um botão faz com a sessão de outra pessoa não é ajuda
   de iniciante; é a única coisa na tela que diz o que o botão faz. Um modo que
   a esconde é um modo em que o produto passa a mentir por omissão para quem o
   ligou, e a única forma de descobrir isso é desligá-lo e reler tela por tela.
   O que sobrou aqui é o que sempre foi verdade: sempre visível, para todo mundo.

   ---- por que não é `t-micro` em `osso-apagado` ----

   A primeira versão saiu em 9px e numa cor que `docs/tokens-achados.md` anota
   como «4,11:1 só texto grande». Os dois estavam errados pelo mesmo motivo:
   escrever em letra ilegível a única explicação de um controle. Aquela folha já
   tinha decidido isto — a pendência do `osso-apagado` diz que a saída é subir a
   cor **ou garantir que nada necessário dependa só dela**.

   A hierarquia contra o rótulo que ela acompanha vem da tipografia e não da
   legibilidade: o rótulo é Saira em caixa alta com tracking largo, a nota é
   monoespaçada em caixa baixa. Isso separa os dois sem que um deles seja
   difícil de ler. */
.nota {
  display: block;
  font-size: var(--seele-t-dado);
  line-height: 1.4;
  color: var(--seele-osso);
}


/* ---------------------------------------------------------- a rolagem
 *
 * **Do produto, e não do sistema.** Sem estas regras o WebView2 desenha a
 * barra clara do Windows sobre uma interface preta — uma faixa branca de 17px
 * ao lado de cada lista, que é a única parte da janela que não é nossa.
 *
 * No macOS quase não se vê: o sistema usa barra sobreposta, que só aparece
 * enquanto se rola. Foi por isso que isto passou tanto tempo sem ser notado —
 * quem desenvolve está no Mac, e quem usa relatou do Windows.
 *
 * Duas famílias de propriedade porque nenhuma delas cobre tudo: o
 * `::-webkit-scrollbar` é o que o WebView2 e o WebKit entendem, e o
 * `scrollbar-color` é o padrão, que o Firefox e as versões novas dos dois
 * também leem. Escrever só a padrão perderia a borda do polegar; escrever só a
 * `-webkit-` perderia quem já migrou.
 *
 * Valores da comp da 0.9.0. A borda de 3px no polegar não é enfeite: ela é o
 * negro do fundo, e é o que faz o polegar parecer flutuar em vez de encostar
 * nas paredes do trilho. */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track { background: var(--seele-negro-absoluto); }

*::-webkit-scrollbar-thumb {
  background: var(--seele-linha-forte);
  border: 3px solid var(--seele-negro-absoluto);
}

/* Laranja ao passar, como todo controle desta janela. */
*::-webkit-scrollbar-thumb:hover { background: var(--seele-laranja-nerv); }

/* Onde as duas barras se encontram, numa lista que rola nos dois eixos. Sem
   isto o canto fica com o cinza do sistema, que é o defeito que estas regras
   existem para tirar — só que num quadrado de 10px que ninguém procura. */
*::-webkit-scrollbar-corner { background: var(--seele-negro-absoluto); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--seele-linha-forte) var(--seele-negro-absoluto);
}


/* ------------------------------------------------- a barra da janela
 *
 * Valores da comp da 0.9.0. `user-select: none` porque arrastar uma janela e
 * selecionar o texto dela são gestos que se confundem no mesmo pixel.
 *
 * `-webkit-app-region: drag` é o que faz a faixa mover a janela; os controles
 * pedem `no-drag` de volta, ou o clique neles vira um arrasto de zero pixel e
 * o botão nunca dispara. */
.barra-janela {
  height: var(--seele-barra-janela);
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  background: var(--seele-negro-painel);
  border-bottom: 1px solid var(--seele-linha);
  user-select: none;
  -webkit-app-region: drag;
}

.barra-marca {
  width: 56px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--seele-linha);
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--seele-laranja-nerv);
}

/* **No macOS a marca vai para a direita.** O canto esquerdo é dos três
   semáforos do sistema, que o `titleBarStyle: Overlay` mantém; a marca ali os
   empurraria para dentro do conteúdo. `order` e não uma segunda marcação: é o
   mesmo elemento noutro lugar, e duplicá-lo seria duplicar o que ele diz.

   O recuo de 78px é onde os semáforos acabam — três botões de 12px com 8px
   entre eles, mais a margem do sistema. Menos que isso e o nome do servidor
   começa por baixo deles. */
.barra-janela[data-plataforma="macos"] {
  padding-left: 78px;
}

.barra-janela[data-plataforma="macos"] .barra-marca {
  order: 3;
  border-right: 0;
  border-left: 1px solid var(--seele-linha);
}

/* Os controles nossos não existem no macOS: os do sistema estão desenhados por
   cima, à esquerda, e dois conjuntos na mesma barra é a janela dizendo duas
   vezes a mesma coisa. */
.barra-janela[data-plataforma="macos"] .barra-controles { display: none; }

.barra-servidor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-width: 0;
  flex: 1;
}

.barra-servidor-nome {
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--seele-osso);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `SERVIDOR · CONEXÃO SEGURA` — o segundo campo do bloco do servidor, e é onde
 * o estado do enlace mora. A comp o escreve assim e o deixa vazio na entrada.
 *
 * A cor é o estado, e é por isso que ela não é uma só: uma conexão que esta
 * máquina ainda não verificou pintada como a verificada seria a folha de
 * estilo mentindo sobre segurança. A palavra diz o mesmo, para quem a cor não
 * alcança. */
.barra-servidor-sub {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--seele-osso-apagado);
  white-space: nowrap;
}

.barra-servidor-sub[data-padrao="Verified"] { color: var(--seele-padrao-azul); }
.barra-servidor-sub[data-padrao="Unverified"] { color: var(--seele-laranja-nerv); }

.barra-relogio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-left: 1px solid var(--seele-linha);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--seele-osso);
  font-variant-numeric: tabular-nums;
}

.barra-controles {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  -webkit-app-region: no-drag;
}

.barra-controle {
  width: 44px;
  border: 0;
  border-left: 1px solid var(--seele-linha);
  background: none;
  color: var(--seele-osso-apagado);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.barra-controle:hover {
  color: var(--seele-osso);
  background: var(--seele-linha);
}

/* O fechar é o único que muda de cor ao passar, e é vermelho: `07-estetica.md`
   reserva o vermelho para o que não tem volta, e fechar a janela no meio de uma
   conversa é a coisa mais irreversível que esta barra oferece. */
.barra-controle-fechar:hover {
  color: var(--seele-negro-absoluto);
  background: var(--seele-vermelho-alerta);
}