/*
 * A PÁGINA DE STATUS (ADR-031, T-322).
 *
 * Só tokens: cor, raio, espaço e tipografia vêm de `tokens.css`, gerado de
 * `design/tokens.json` como o dos outros front-ends — o portão de valores visuais
 * varre esta pasta. O tema escuro vem junto com os tokens.
 *
 * O ESTADO É DITO POR TEXTO, e a cor só o reforça: verde, âmbar e vermelho são a
 * distinção que mais falha para quem não enxerga cor.
 */

/* AS FONTES SÃO EMBUTIDAS, como no resto do produto: declarada e não embutida,
   ela cai no padrão do sistema sem aviso nenhum. Só o recorte latino — a página
   é em português. */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fontes/archivo-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Asap Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fontes/asap-latin-wght-normal.woff2') format('woff2-variations');
}

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

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  min-height: 100vh;
  /* O MESMO DEGRADÊ DOS APLICATIVOS, e no mesmo sentido: desce. */
  background: linear-gradient(to bottom, var(--cor-fundo), var(--cor-fundo-fim)) fixed;
  color: var(--cor-texto);
  font-family: var(--texto-corpo-fonte);
  font-size: var(--texto-corpo-tamanho);
  font-weight: var(--texto-corpo-peso);
  line-height: var(--texto-corpo-altura);
}

.topo,
main,
.pe {
  width: 100%;
  max-width: var(--layout-largura-maxima-de-conteudo);
  margin-inline: auto;
  padding-inline: var(--espaco-4);
}

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  padding-block: var(--espaco-5) var(--espaco-4);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
  padding-block-end: var(--espaco-7);
}

p,
h1,
h2,
h3,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

.marca {
  font-family: var(--texto-marca-fonte);
  font-size: var(--texto-titulo-card-tamanho);
  font-weight: var(--texto-marca-peso);
  color: var(--cor-marca);
}

.ambiente {
  padding: var(--espaco-1) var(--espaco-3);
  border: 1px solid var(--cor-atencao);
  border-radius: var(--raio-etiqueta);
  font-size: var(--texto-apoio-tamanho);
  font-weight: var(--texto-corpo-forte-peso);
}

h2 {
  margin-block-end: var(--espaco-3);
  font-family: var(--texto-secao-fonte);
  font-size: var(--texto-secao-tamanho);
  font-weight: var(--texto-secao-peso);
  line-height: var(--texto-secao-altura);
}

.apoio {
  color: var(--cor-texto-suave);
  font-size: var(--texto-apoio-tamanho);
  line-height: var(--texto-apoio-altura);
}

/* ------------------------------------------------------------ a frase do topo
   O elemento de assinatura da tela: é a pergunta que a pessoa veio fazer. */
.geral {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-inline-start: var(--espaco-2) solid var(--cor-borda-forte);
  border-radius: var(--raio-card);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--sombra-repouso);
}

.geral h1 {
  font-family: var(--texto-tela-fonte);
  font-size: var(--texto-tela-tamanho);
  font-weight: var(--texto-tela-peso);
  line-height: var(--texto-tela-altura);
  text-wrap: balance;
}

.geral[data-estado='ok'] { border-inline-start-color: var(--cor-sucesso); }
.geral[data-estado='instavel'] { border-inline-start-color: var(--cor-atencao); }
.geral[data-estado='fora'] { border-inline-start-color: var(--cor-perigo); }

/* ------------------------------------------------------------------ os itens */
.itens {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  margin-block-end: var(--espaco-3);
}

.item {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
}

.item__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-4);
}

.item__nome {
  font-family: var(--texto-titulo-card-fonte);
  font-size: var(--texto-titulo-card-tamanho);
  font-weight: var(--texto-titulo-card-peso);
  line-height: var(--texto-titulo-card-altura);
}

.item__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  font-weight: var(--texto-corpo-forte-peso);
}

.item__desde {
  color: var(--cor-texto-suave);
  font-weight: var(--texto-corpo-peso);
}

.item__ponto {
  width: var(--espaco-3);
  height: var(--espaco-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-borda-forte);
}

.item[data-estado='ok'] .item__ponto { background: var(--cor-sucesso); }
.item[data-estado='instavel'] .item__ponto { background: var(--cor-atencao); }
.item[data-estado='fora'] .item__ponto { background: var(--cor-perigo); }

/* A FAIXA: um traço por dia. Encolhe com a janela em vez de rolar de lado —
   noventa traços cabem num celular estreito porque cada um cede largura. */
.faixa {
  display: flex;
  gap: 2px;
  height: var(--espaco-6);
}

.faixa__dia {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: var(--raio-etiqueta);
  background: var(--cor-borda);
}

.faixa__dia[data-estado='ok'] { background: var(--cor-sucesso); }
.faixa__dia[data-estado='instavel'] { background: var(--cor-atencao); }
.faixa__dia[data-estado='fora'] { background: var(--cor-perigo); }

/* --------------------------------------------------------------- os episódios */
.episodios {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.episodio {
  padding-inline-start: var(--espaco-3);
  border-inline-start: var(--espaco-1) solid var(--cor-borda-forte);
}

.episodio[data-estado='instavel'] { border-inline-start-color: var(--cor-atencao); }
.episodio[data-estado='fora'] { border-inline-start-color: var(--cor-perigo); }

.episodio__titulo {
  font-weight: var(--texto-corpo-forte-peso);
}

.pe {
  padding-block: var(--espaco-5) var(--espaco-7);
  border-block-start: 1px solid var(--cor-borda);
}

/* ------------------------------------------------------------------ o teclado */
.pular {
  position: absolute;
  inset-inline-start: var(--espaco-4);
  inset-block-start: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  transform: translateY(-200%);
}

.pular:focus-visible {
  transform: none;
}

:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: var(--foco-folga);
}