/* A pagina publica de status (#4947, 29/08).
   Vive em cima de landing-2a.css: cores, fontes e botoes vem de la. Aqui so o
   que e proprio desta tela. */

.st { max-width: var(--l-larg); margin: 0 auto; padding: 72px 48px 96px; }
.st-cab { max-width: 66ch; }
.st-h1 { font-size: 52px; margin: 0 0 16px; }
.st-lead { margin: 0 0 40px; }

/* ── o resumo do topo ──
   A LUZ NASCE SEM COR (o cinza do .st-luz cru) e so ganha classe depois da
   leitura. Bolinha verde pintada no CSS diria "tudo certo" com o servidor no
   chao, e o visitante so descobriria a mentira ao tentar entrar. */
.st-luz {
  width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block;
  background: var(--l-tinta-5);
}
.st-luz.verde    { background: #2E9E76; }
.st-luz.amarelo  { background: #C08618; }
.st-luz.vermelho { background: #C0463D; }
/* #6243: reinicio planejado para atualizar o sistema. Azul, porque nao e falha. */
.st-luz.atualizacao { background: #3A78C2; }

.st-resumo {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--l-linha); border-radius: 14px;
  background: var(--l-creme-2); padding: 22px 26px; margin: 0 0 34px;
}
.st-resumo .st-luz { width: 16px; height: 16px; }
.st-msg { margin: 0; font-size: 19px; font-weight: 600; color: var(--l-tinta); }
.st-resumo.carregando .st-msg { color: var(--l-tinta-4); font-weight: 400; }

/* ── os servidores: UMA LINHA CADA (#6203), SO A SIGLA E A TIRA (#6219) ──
   Pedido do dono em 30/09: "apenas teremos as 3 barras mostrando as ultimas 24h".
   Sem porcentagem, sem descricao, sem estado escrito: a cor das barras e o recado. */
.st-aviso {
  margin: 0 0 20px; padding: 14px 18px; font-size: 15px; line-height: 1.55;
  color: var(--l-tinta-2); background: var(--l-frio);
  border: 1px solid var(--l-linha); border-left: 3px solid var(--l-teal);
  border-radius: 10px;
}
.st-painel { border: 1px solid var(--l-linha); border-radius: 14px; overflow: hidden; }
.st-linha {
  /* #6243: a coluna da % tem largura FIXA. Com "auto", "100%" e mais curto que
     "99,97%" e a tira daquela linha esticava (print do dono em 01/10): as tres
     tiras tem de comecar e terminar no mesmo ponto. */
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 76px;
  gap: 20px; align-items: center; padding: 18px 22px;
}
/* #6243: a porcentagem das ultimas 24h, sozinha, a direita da tira. */
.st-disp {
  font-size: 15px; font-weight: 700; color: var(--l-tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.st-disp.sem { font-size: 12px; font-weight: 600; color: var(--l-tinta-4); }
.st-linha + .st-linha { border-top: 1px solid var(--l-linha); }
.st-sigla {
  font-size: 14px; font-weight: 800; letter-spacing: .12em;
  color: var(--l-teal-ink); text-transform: uppercase;
}

/* ── a tira das ultimas 24 horas ──
   Uma barra por hora. A barra SEM LEITURA e um tracinho apagado, nao um vao: vao
   sumiria e a tira mentiria sobre quanto tempo foi observado de verdade. */
.st-linha-meio { min-width: 0; }
.st-tira { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.st-barra {
  flex: 1 1 0; min-width: 3px; border-radius: 2px; display: block;
  background: var(--l-tinta-5); height: 100%;
}
.st-barra.verde    { background: #2E9E76; height: 100%; }
.st-barra.amarelo  { background: #C08618; height: 62%; }
.st-barra.vermelho { background: #C0463D; height: 34%; }
.st-barra.atualizacao { background: #3A78C2; height: 100%; }
.st-barra.vazia    { background: var(--l-linha); height: 18%; }
.st-barra.parcial  { opacity: .55; }
/* #6243: 96 barras de 15 minutos. O vao de 3px viraria um terco da tira no telefone. */
.st-tira.fina { gap: 1px; }
.st-tira.fina .st-barra { min-width: 1px; border-radius: 1px; }
.st-tira-leg {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11.5px; color: var(--l-tinta-4);
}
.st-sem-tira { margin: 0; font-size: 14.5px; color: var(--l-tinta-4); line-height: 1.5; }

.st-hora { margin: 18px 0 0; font-size: 13.5px; color: var(--l-tinta-4); }

/* ── legenda ── */
.st-secao { margin-top: 56px; }
.st-h2 { font-family: var(--l-serif); font-size: 27px; margin: 0 0 18px; color: var(--l-tinta); }

.st-cores { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-cores li {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 16px; line-height: 1.6; color: var(--l-tinta-2);
}
.st-cores strong { color: var(--l-tinta); }
.st-nota { margin: 20px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--l-tinta-4); max-width: 78ch; }

.st-fim { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--l-linha); }

@media (max-width: 900px) {
  /* No telefone a sigla sobe e a tira ocupa a largura toda: 24 barras em 300px
     viram uma mancha se ainda dividirem a linha com a sigla. */
  .st-linha { grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
  /* #6243: no telefone a sigla e a porcentagem dividem a primeira linha e a tira
     desce inteira, na largura toda. */
  .st-linha-meio { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 720px) {
  .st { padding: 48px 28px 64px; }
  .st-h1 { font-size: 36px; }
}