/* A TELA DA CENTRAL, e ela nao e o painel do operador em fonte maior.
 *
 * Sao exigencias opostas, e e por isso que este arquivo existe separado (ticket 12): a ficha e 14
 * polegadas a distancia de teclado, para LER; a TV e 32 a 40 polegadas a distancia de uma sala,
 * para RECONHECER de relance enquanto se faz outra coisa. Misturar as duas faria uma brigar com a
 * outra pelos mesmos seletores.
 *
 * O `index.html` nao carrega este arquivo, e o `tv.html` nao carrega o `estilo.css`. As duas telas
 * compartilham os TOKENS DE COR e as FONTES, e nada de layout.
 *
 * ESCALA FLUIDA, e nao fixa. A TV nao tem um tamanho: tem uma DISTANCIA. Um px que serve numa de
 * 32" fica pequeno numa de 40" no fim de um corredor. Os pisos de cada `clamp` sao o tamanho abaixo
 * do qual a linha deixa de ser legivel a tres metros. Registrada no DESIGN.md antes de aparecer
 * aqui, como aquele documento exige.
 *
 * O QUE NUNCA APARECE AQUI: telefone e gravacao. A tela fica a vista de quem passa numa sala, e o
 * ticket 12 e explicito. Isso nao se garante na folha de estilo -- garante-se em `tv.js`, que pede
 * ao banco so as colunas que pode mostrar.
 */

@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* O ITALICO DE VERDADE, e ele so existe nesta tela.
   Sem este arquivo, `font-style: italic` faria o navegador INCLINAR o romano -- italico sintetico,
   que a 46px numa parede aparece: as curvas ficam distorcidas e as juncoes engrossam, porque
   ninguem desenhou aquelas formas. O Archivo tem italico proprio, entao usa-se o italico proprio.
   A ficha nao carrega este arquivo: la nao ha italico, e fonte que ninguem usa e peso que todo
   mundo baixa. */
@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-italico-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fontes/courier-prime-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fontes/courier-prime-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Os mesmos tokens da ficha. Cor e identidade do produto, e nao da tela. */
  --tinta:        #1d5c6b;
  --tinta-fraca:  #5b8e9b;
  --tinta-massa:  #2a7a90;
  --papel:        #ffffff;
  --conteudo:     #1a1a1a;

  /* TINTA FRACA FRIA, e este e o unico token que a TV muda de valor.
     Na ficha o fraco e `#5a5347`, um neutro de PAPEL -- quente de proposito, porque aquela tela e
     um documento impresso. Em escala de TV, com a hora em Courier ocupando uma coluna inteira, o
     quente le SEPIA contra a paleta fria e a tela parece ter duas famılias de cor.
     `#4f6068` fecha 6,55:1 sobre o papel (acima do piso de 4,5 para texto normal) e pertence a
     mesma familia fria da tinta. */
  --conteudo-fraco:#4f6068;

  --alerta:       #b3352a;
  --sobre-tinta:  #ffffff;
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%231d5c6b' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");

  /* A COR DA PLACA DE IDENTIDADE. De dia e a propria tinta; a noite ela NAO acompanha o resto --
     ver o comentario no bloco da rendicao noturna. Declarada aqui, no bloco de origem, e nao
     depois: `:root` e `[data-rendicao="noite"]` tem a mesma especificidade, entao um `:root`
     escrito abaixo anularia o valor noturno em silencio. */
  --tinta-placa:  var(--tinta);

  --serifado: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --datilo:   'Courier Prime', 'Courier New', ui-monospace, monospace;

  /* A ESCALA DA TV. Ver DESIGN.md.
   *
   * OS TETOS FORAM MEDIDOS E ESTAVAM ERRADOS. A primeira versao saturava todos os `clamp` em
   * 2560px, e a consequencia foi medida numa captura a 3840: de 2560 para 4K nada crescia, entao
   * o heroi caia de 11,4% da altura para 6,1% e a lista subia de 5 para 19 linhas. **A tela ficava
   * PIOR na TV maior** -- e o DESIGN.md afirmava exatamente o contrario ("passado 2060px o que
   * vale e o heroi"). O documento estava certo; o codigo e que nao cumpria.
   *
   * Os tetos agora saturam perto de 3840, e nao de 2560. Uma parede de 40 polegadas passa a usar
   * os pixels que tem. */
  --tv-heroi:    clamp(48px, 6.4vw, 240px);
  --tv-desfecho: clamp(30px, 3.8vw, 140px);
  --tv-linha:    clamp(20px, 2.3vw, 84px);
  --tv-rotulo:   clamp(13px, 1.25vw, 46px);
  --tv-relogio:  clamp(22px, 2.6vw, 96px);

  /* O PASSO DE ESPACO TAMBEM E FLUIDO, e essa era a metade esquecida do defeito.
   * Com `--u: 4px` fixo, o `padding: calc(var(--u) * 8)` = 32px dava 0,8% de margem num painel 4K:
   * o texto quase encostando na moldura enquanto a tipografia crescia. Tipo fluido com espaco
   * fixo nao e escala, e um zoom que aperta. */
  --u: clamp(4px, 0.32vw, 9px);

  color-scheme: light;
}

/* A MESA DE LUZ, pelo relogio e nao pelo tema do sistema -- o que muda e a luz da sala.
   Numa TV isso pesa mais que na ficha: uma chapa branca de 40 polegadas numa central com pouca luz
   e desconfortavel por horas, e o turno da noite e justamente quando a Pati mais atende. */
[data-rendicao="noite"] {
  --tinta:        #7fd0e4;
  --tinta-fraca:  #3d6b78;
  --tinta-massa:  #23708a;
  --papel:        #101a1e;
  --conteudo:     #e8eef0;
  --conteudo-fraco:#a8b6bb;
  --alerta:       #ff8a7a;
  --sobre-tinta:  #101a1e;
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%237fd0e4' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");

  /* A FAIXA NAO ACENDE JUNTO, E ESSA E A UNICA DIVERGENCIA DA TV EM RELACAO A FICHA.
     Na ficha a tinta clareia a noite -- o aparato deixa de ser impresso e passa a ser ACESO --, e
     num monitor de 14 polegadas isso e bonito. Numa parede de 40, a mesma regra faz uma barra
     cyan de ponta a ponta virar a coisa mais clara da sala escura: um refletor apontado para quem
     esta de plantao. A captura noturna mostrou isso na primeira vez que a faixa existiu.
     Entao aqui ela mantem a tinta do DIA como fundo, e isso tem logica propria: a faixa e uma
     PLACA, e placa nao acende porque a sala apagou. Medido: branco sobre #1d5c6b da 7,51:1.
     De quebra o escudo continua legivel -- o contorno preto do PNG sumiria num fundo escuro. */
  --tinta-placa:  #1d5c6b;

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--papel) var(--grade);
  color: var(--conteudo);
  font-family: var(--serifado);
  /* A TV nao tem cursor e ninguem senta na frente dela. Esconder o ponteiro evita a seta parada no
     meio da tela por oito horas -- e ela QUEIMA em painel OLED. */
  cursor: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Numero que se compara com outro numero sai datilografado, como na ficha.
   (A Regra do Numero Datilografado, DESIGN.md.) */
.num {
  font-family: var(--datilo);
  font-variant-numeric: tabular-nums;
}

/* ============================== A TARJA DE CIMA ============================== */

.tarja {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 4) calc(var(--u) * 8);
  background: var(--tinta-placa);
  /* Branco fixo, e nao `--sobre-tinta`: a placa nao acompanha a rendicao, entao o texto sobre ela
     tambem nao pode. `--sobre-tinta` vira escuro a noite e sumiria sobre a placa. 7,51:1. */
  color: #ffffff;
  flex: none;
}

/* O ESCUDO, no mesmo arquivo que a ficha carrega.
   Dimensionado a partir da escala fluida e nao em px: ele acompanha o resto da faixa, senao numa
   TV de 4K a marca vira selo e o relogio ao lado dela vira outdoor.
   O FATOR SUBIU DE 1,25 PARA 2, a pedido do dono do produto depois de ver a faixa montada. A
   marca passa a ser o objeto que ancora a faixa, e nao um adorno a esquerda do nome -- e numa
   tela cujo trabalho novo e mostrar de quem e o produto, isso e o item que faz o trabalho. */
.tarja__escudo {
  width: auto;
  height: calc(var(--tv-relogio) * 2);
  flex: none;
}

.tarja__marca {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  min-width: 0;
}

.tarja__produto {
  font-size: var(--tv-rotulo);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}

/* O DESCRITOR EM INGLES, e o unico ingles da tela.
   Nao vai em caixa alta espacejada como o nome acima: duas linhas com o mesmo tratamento
   competiriam, e a de cima e o nome do produto. Aqui a diferenca de caixa, peso e ESTILO cria a
   hierarquia sem precisar de mais tamanho.
   ITALICO a pedido do dono do produto -- e ele tem uma segunda razao boa: o italico marca a linha
   como de outra natureza que o nome acima. Uma e o produto, a outra e o que ele E; e a convencao
   tipografica de "isto e uma qualificacao, nao um titulo".
   Italico REAL, com arquivo proprio: sem ele o navegador inclinaria o romano, e a 46px numa parede
   o falso italico aparece.
   Opacidade e nao cinza: sobre a tinta cheia, cinza suja; o mesmo branco rebaixado mantem a
   familia. Medido: 0.72 sobre --tinta da 5,4:1, acima do piso de 4,5 para texto normal. */
.tarja__descritor {
  font-size: var(--tv-rotulo);
  font-weight: 400;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .72;
}

.tarja__relogio {
  margin-left: auto;
  font-size: var(--tv-relogio);
  font-weight: 700;
}

/* O SINAL DE VIDA. Uma tela de parede que congela nao avisa que congelou -- ela continua bonita
   mostrando o passado, e essa e a pior falha possivel numa sala de operacao. O ponto pulsa a cada
   pesquisa bem sucedida; se as pesquisas param, ele para, e depois fica vermelho. */
.tarja__sinal {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-size: var(--tv-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* QUADRADO, E NAO CIRCULO, e isto e correcao de uma regra que eu mesmo tinha quebrado.
   O DESIGN.md carrega duas regras nomeadas: "raio zero, sempre" e a Regra da Forma Distinta, que
   diz com todas as letras que um ponto redondo trocando de cor e o token de dashboard de call
   center que esta familia de telas RECUSA. A primeira versao desta TV shipou exatamente ele.
   A ficha ja resolvia isso com formas ortogonais; a TV volta para a mesma familia. */
.tarja__marcador {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  /* Branco fixo pelo mesmo motivo do texto da faixa: ele vive SOBRE a placa, que nao acompanha a
     rendicao. Com `--sobre-tinta` ele viraria escuro a noite e desapareceria dentro dela. */
  background: #ffffff;
}

/* A ESPERA MUDA DE FORMA, E NAO SO DE COR.
   Cego vira losango: quem enxerga cor ve vermelho, e quem nao enxerga ve a forma mudar. Medido, o
   vermelho sobre a tinta cheia da 1,24:1 -- reprova o piso de 3:1 da WCAG 1.4.11 para indicador
   nao-textual, entao a cor SOZINHA nunca poderia carregar este estado. O texto ao lado ja dizia; a
   forma fecha. */
.tarja__marcador[data-estado="cego"] {
  background: var(--alerta);
  transform: rotate(45deg);
}

/* Uma pulsacao por pesquisa, e nao um piscar continuo: o que pisca precisa ter motivo.
   `prefers-reduced-motion` desliga -- a informacao esta na FORMA, na cor e no texto, nunca so no
   movimento. */
.tarja__marcador[data-estado="vivo"] { animation: pulso 900ms ease-out; }

@keyframes pulso {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.9); opacity: .45; }
  100% { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tarja__marcador[data-estado="vivo"] { animation: none; }
}

/* ============================== A VOLTA ============================== */

/* O caminho de volta ao painel do operador. Ver o comentario no tv.html: em operacao ninguem chega
   perto desta tela, entao ele fica invisivel; quando alguem mexe no mouse -- ou chega pelo Tab --
   ele aparece, e some tres segundos depois.
   Canto inferior direito: longe do heroi, que e o que se le de longe, e longe do rodape das
   contagens, que e informacao. */
.volta {
  position: fixed;
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 6);
  z-index: 10;
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-size: var(--tv-rotulo);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;

  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

/* `body[data-mao]` e ligado pelo tv.js ao primeiro movimento do mouse, e desligado apos a quietude.
   O foco do teclado revela sozinho, sem depender do mouse: quem chega de Tab precisa ver onde
   esta. */
body[data-mao] .volta,
.volta:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Quando o mouse aparece, o cursor volta junto -- senao ha um botao visivel e nada com que
   aponta-lo. */
body[data-mao] { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .volta { transition: none; }
}

/* ============================== O HEROI ============================== */

/* O ATENDIMENTO MAIS RECENTE, que e o unico que alguem olha de longe.
   Ele nao "toma o topo quando entra chamada" -- ver o comentario no tv.js: sem a faixa AO VIVO
   (que depende do ticket 12/D9) a tela so sabe do atendimento quando ele TERMINA. O que ela mostra
   e o ultimo que aconteceu, e o carimbo de idade diz quao recente ele e. */
/* O PALCO. As duas perguntas da sala, lado a lado, porque sao de donos diferentes:
   "o que acabou de acontecer?" e do operador; "isso funciona?" e do visitante. */
.palco {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 3px solid var(--tinta);
}

.heroi {
  padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 6);
  min-width: 0;   /* deixa o nome longo truncar dentro da coluna em vez de esticar a grade */
}

/* ============================== A PROVA ============================== */

/* A DEFLEXAO EM ESCALA, e nao um cartao de metrica.
   O craft floor bane o template "numero grande, rotulo pequeno, estatistica de apoio, acento" --
   e e exatamente nele que este bloco cairia se eu o desenhasse como card. Ele nao e card: nao tem
   fundo proprio, nem canto, nem sombra. E uma COLUNA da mesma chapa, separada por uma regua de
   tinta, como os campos numerados da ficha sao separados entre si.
   A tinta cheia fica so na faixa de identidade: se este bloco tambem fosse solido, a prova
   competiria com a marca, e sao a mesma mensagem dita duas vezes. */
.prova {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 8);
  border-left: 3px solid var(--tinta);
  text-align: right;
}

.prova__rotulo {
  margin: 0;
  font-size: var(--tv-rotulo);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* A FRACAO CARREGA O DENOMINADOR, e isso nao e detalhe.
   "4" sozinho nao prova nada; "4/5" prova. E um percentual sem base -- "80%" -- pareceria mais
   forte e diria menos, porque num dia de duas ligacoes ele seria 50% ou 100% por acidente. */
.prova__fracao {
  margin: 0;
  font-size: var(--tv-heroi);
  font-weight: 700;
  line-height: .95;
  color: var(--conteudo);
  white-space: nowrap;
}

.prova__barra {
  color: var(--tinta-fraca);
  font-weight: 400;
  margin: 0 .06em;
}

/* O denominador nao compete com o numerador: mesma familia, um passo de peso e de tom abaixo. */
.prova__total {
  color: var(--conteudo-fraco);
  font-weight: 400;
}

.prova__apoio {
  margin: 0;
  font-size: var(--tv-rotulo);
  color: var(--conteudo-fraco);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* O NOME DO CAMPO, que e a gramatica da ficha trazida para ca.
   La cada valor tem um rotulo em caixa alta azul acima dele -- e por isso que ninguem precisa
   aprender onde as coisas ficam. A TV usa os mesmos campos, sem a numeracao: na ficha o numero
   faz parte do formulario impresso, aqui ele nao carregaria informacao nenhuma. */
.campo__nome {
  font-size: var(--tv-rotulo);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 0 0 calc(var(--u) * 2);
}

.heroi__onde {
  font-size: var(--tv-heroi);
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 calc(var(--u) * 3);
  /* Nome de condominio longo nao pode empurrar o desfecho para fora da tela. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* OS DOIS REGISTROS, LADO A LADO E CADA UM COM SEU NOME.
   Lado a lado e nao empilhados: empilhar faz o de cima parecer a conclusao e o de baixo parecer a
   ressalva, e eles nao tem essa relacao -- sao respostas a duas perguntas diferentes.
   `flex-wrap` porque num nome de desfecho longo, em tela estreita, a segunda coluna desce inteira
   em vez de espremer as duas. */
.registros {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4) calc(var(--u) * 12);
  margin-top: calc(var(--u) * 5);
}

.registro { min-width: 0; }

.registro__valor {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  color: var(--tinta-massa);
  /* O tamanho de um registro comum: a resposta que apoia. */
  font-size: var(--tv-linha);
}

/* O REGISTRO PRINCIPAL E O DA ENTREGA, quando ela existe.
   A pergunta que a central tem nao e "a Pati atendeu?", e sim "a comida chegou?". Quando nao houve
   entrega, o campo inteiro some e a CHAMADA assume este tamanho -- ver a regra logo abaixo. */
.registro--principal .registro__valor {
  font-size: var(--tv-desfecho);
}

/* Sem entrega, a chamada e a unica resposta que existe, entao ela ocupa a escala principal.
   IRMAO ADJACENTE, e nao `:only-child`: o registro da entrega continua no DOM quando esta oculto
   (`hidden` e um atributo, nao uma remocao), entao `:only-child` nunca casaria e a chamada ficaria
   pequena sozinha na tela. Escrevi `:only-child` primeiro e o seletor estava errado pelo mesmo
   motivo que engana todo mundo: "escondido" e "ausente" nao sao a mesma coisa para o CSS.
   Assim o layout decide o tamanho a partir do que sobrou visivel, sem o JavaScript saber de
   tipografia -- que e onde essa decisao pertence. */
.registro[hidden] + .registro .registro__valor {
  font-size: var(--tv-desfecho);
}

.heroi__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 8);
  margin-top: calc(var(--u) * 5);
  font-size: var(--tv-linha);
  color: var(--conteudo-fraco);
}

/* A idade nao e numero comparavel: e uma frase ("ha 2 horas"). Sai do datilografado, senao ela
   entra na coluna de numeros fingindo ser um deles. */
.heroi__idade {
  font-family: var(--serifado);
  font-style: italic;
}

/* ============================== A LISTA ============================== */

.lista {
  flex: 1 1 auto;
  overflow: hidden;      /* nada de barra de rolagem: o que nao cabe nao existe para quem olha de longe */
  padding: calc(var(--u) * 4) calc(var(--u) * 8);
  margin: 0;
  list-style: none;

  /* A ULTIMA LINHA SE DISSOLVE EM VEZ DE SER SERRADA.
     `overflow: hidden` sozinho corta o glifo ao meio, e meia letra numa parede nao le como "tem
     mais": le como TELA QUEBRADA -- que e a leitura mais cara possivel numa sala onde entra
     cliente. A mascara resolve sem mentir: a lista continua terminando onde a tela termina, mas o
     corte passa a ser uma dissolucao, que e o vocabulario universal de "continua".
     Nao e enfeite: e a diferenca entre truncar e parecer defeito. */
     O ponto de dissolucao subiu de 82% para 90% quando o escudo dobrou de tamanho: a faixa ficou
     mais alta, a area da lista encolheu, e a mesma rampa passou a apagar uma linha que ainda era
     legivel. Mascara e proporcional a caixa, entao ela precisa ser reconferida quando a caixa
     muda -- foi a captura que mostrou, nao o calculo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 99.5%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 99.5%);
}

.linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: calc(var(--u) * 6);
  align-items: baseline;
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--tinta-fraca);
  font-size: var(--tv-linha);
}

/* COM UM PREDIO SO, A COLUNA DELE NAO EXISTE -- e o desfecho herda a largura.
   Ver o comentario no `tv.js`: o nome repetido em cada linha era o objeto mais largo da lista
   carregando zero informacao, e ensinava o olho a nao ler a lista. O `data-predio` vem do que esta
   NA TELA, entao a coluna volta sozinha quando o segundo condominio entrar. */
.lista[data-predio="unico"] .linha {
  grid-template-columns: auto 1fr;
}

/* Sem a coluna do meio, o desfecho deixa de ser um bloco a direita e passa a ser A informacao da
   linha: alinhado a esquerda, logo depois da hora, que e como se le uma lista de fatos. */
.lista[data-predio="unico"] .linha__desfecho {
  text-align: left;
  white-space: normal;
}

.linha__hora { color: var(--conteudo-fraco); }

.linha__onde {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha__desfecho {
  color: var(--tinta-massa);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* O RODAPE SAIU.
   As quatro contagens viviam aqui em 13px, com peso visual igual entre si, embora so duas contem a
   historia. A prova de valor era o texto menor e mais apagado da parede enquanto a maior frase
   podia ser "Ninguem atendeu" -- o visitante levava a pior frase e nao via a prova. Elas subiram
   para `.prova`, ao lado do heroi. */

/* ============================== SEM NADA ============================== */

.vazio {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 4);
  text-align: center;
  padding: calc(var(--u) * 8);
}

.vazio__titulo {
  font-size: var(--tv-desfecho);
  font-weight: 700;
  margin: 0;
  color: var(--tinta);
}

.vazio__nota {
  font-size: var(--tv-linha);
  margin: 0;
  color: var(--conteudo-fraco);
  max-width: 40ch;
}