/* First-paint layout and safe loading UI shared by every application document. */
html { scrollbar-gutter: stable; }

.app-page-loading { display: none; }
body[data-auth-state="pending"] > .app-page-loading {
  display: block;
  position: fixed;
  inset: 0;
  padding: calc(var(--header-height, 80px) + 2rem) max(1.25rem, calc((100vw - 1600px) / 2));
  background: var(--bg);
  z-index: 9000;
  pointer-events: none;
}
body[data-auth-state="pending"] > header,
body[data-auth-state="pending"] > main,
body[data-auth-state="pending"] > footer { visibility: hidden; }
html[data-app-protected="true"] .app-page-loading { inset-inline-start: 72px; }
.app-page-loading__label { display: block; color: var(--muted); font-size: .9rem; margin-block-end: 1.25rem; }
.app-page-loading__label [lang="ar"] { display: none; }
html[lang="ar"] .app-page-loading__label [lang="en"] { display: none; }
html[lang="ar"] .app-page-loading__label [lang="ar"] { display: inline; }
.app-page-loading__heading,
.app-page-loading__cards > i,
.app-page-loading__panel { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.app-page-loading__heading { height: 38px; width: min(360px, 65%); margin-block-end: 2rem; }
.app-page-loading__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.app-page-loading__cards > i { height: 110px; }
.app-page-loading__panel { height: 260px; margin-block-start: 1.5rem; }
/* The first viewport should appear together, without entrance translations. */
body .reveal { opacity: 1; transform: none; transition: none; }
@media (max-width: 800px) {
  html[data-app-protected="true"] .app-page-loading { inset-inline-start: 0; }
  .app-page-loading__cards { grid-template-columns: 1fr; }
  .app-page-loading__cards > i { height: 65px; }
}