/* The first paint uses the calculator's palette and responsive shell. */
body { margin: 0; }

.app-loading {
  --loading-background: 202 40% 96.1%;
  --loading-foreground: 210 18.6% 23.1%;
  --loading-card: 0 0% 100%;
  --loading-border: 197 45.1% 80%;
  --loading-muted: 203 34.8% 91%;
  position: absolute;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: hsl(var(--loading-foreground));
  background: hsl(var(--loading-background));
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
}

.dark .app-loading {
  --loading-background: 218 25.8% 12.2%;
  --loading-foreground: 210 40% 96.1%;
  --loading-card: 216 21.7% 18%;
  --loading-border: 215 18.3% 27.8%;
  --loading-muted: 216 19.7% 24.9%;
}

.app-loading-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  padding: 12px;
}

.app-loading h1 {
  display: grid;
  align-items: center;
  min-height: 32px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
}

.app-loading-card {
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid hsl(var(--loading-border));
  border-radius: 12px;
  background: hsl(var(--loading-card));
}

.app-loading-line {
  height: 12px;
  max-width: 60%;
  margin: 8px 0;
  border-radius: 4px;
  background: hsl(var(--loading-muted));
}

.app-loading-line:last-child { max-width: 85%; }
.app-loading-update { margin-bottom: 12px; }
.app-loading-grid { display: grid; gap: 12px; }
.app-loading-grid > .app-loading-card { min-height: 136px; }
.app-loading-status { margin: 16px 0; font-size: 14px; text-align: center; }
.app-loading--brave .app-loading-grid { grid-template-columns: 1fr; }
.app-loading--brave .app-loading-grid > .app-loading-card { min-height: 55vh; }
.app-loading--help .app-loading-grid { grid-template-columns: 1fr; }

@media (min-width: 640px) and (max-width: 1023px) {
  .app-loading-shell { max-width: 720px; }
}

@media (min-width: 1024px) {
  .app-loading-shell { max-width: 1600px; padding: 24px; }
  .app-loading h1 { min-height: 44px; margin-bottom: 16px; font-size: 20px; }
  .app-loading-update { margin-bottom: 16px; }
  .app-loading-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
  .app-loading--help .app-loading-shell { max-width: 896px; }
}