/* O que roda antes do Blazor existir: a barra de carregamento do runtime e a faixa de erro não
   tratado. Só isto mora aqui — a skin está em `win32.*.css`, e o template trazia Bootstrap, que
   `stack.md` descarta porque framework utilitário não produz Win32. */

/* why: estas regras precisam pintar antes de qualquer componente montar, e é por isso que elas
   leem os tokens em vez de trazer cor própria. Um `#e0e0e0` aqui viraria retângulo claro no modo
   escuro durante os segundos em que a página é só isto. */
/* why: barra em vez do anel que o template trazia. O anel é vocabulário de web moderna, e a barra
   com sulco e preenchimento é o que um programa Win32 mostra enquanto carrega — a primeira tela do
   demo já diz o que ele é.
   why: a tela de carregamento sempre aparece no tema claro, porque o atributo `data-color-mode` só
   é carimbado depois de o runtime subir. O logo tem fundo transparente por isso mesmo: sobre o
   cinza do cromo ele pousa, e um retângulo branco não. */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-loose);
  padding-top: 18vh;
}

.loading__logo {
  max-width: 70vw;
  height: auto;
}

.loading__track {
  width: min(280px, 70vw);
  height: 18px;
  padding: var(--space-hairline);
  background: var(--surface);
}

.loading__bar {
  width: var(--blazor-load-percentage, 0%);
  height: 100%;
  background: var(--accent);
  transition: width 0.05s ease-in-out;
}

.loading__text {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.loading__text::after {
  content: var(--blazor-load-percentage-text, 'Carregando');
}

/* why: a faixa de erro do Blazor tem marcação fixa no `index.html` e classes que o runtime liga
   por nome. Ela é reestilizada, nunca renomeada. */
#blazor-error-ui {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  width: 100%;
  padding: var(--space-snug) var(--space-section) var(--space-snug) var(--space-loose);
  background: var(--chrome);
  color: var(--text);
  border-top: 2px solid var(--status-overdue);
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: var(--space-tight);
  right: var(--space-snug);
  cursor: pointer;
}

.blazor-error-boundary {
  padding: var(--space-loose);
  background: var(--surface-band);
  color: var(--text);
  border-left: 2px solid var(--status-overdue);
}

.blazor-error-boundary::after {
  content: 'Ocorreu um erro.';
}