/* loader.css — owned by P8 PR-4 (the logo-and-bar loader; the P8 plan 3.4, D-311). web/account.py links it from
   both documents only while UI_LOADER is on (features.ui_loader_on), after app.css and the v2 auth sheets, with the
   loader's markup (web/loader.py) in place of the grey placeholder — inserted at serve time: account.html and
   auth.html stay byte-identical. Every selector starts with .as-loader, .as-route-progress or :root:lang(xx)
   .as-loader (the loader's language); its base style is visible (opacity 1, C-29); no @import, no url()
   (tests/core/test_account_app.py).

   Motion (C-29: app.css removes every animation under prefers-reduced-motion with !important): every base style is
   the final, visible state and the keyframes only hold something back for a while — the loader's first 150 ms (no
   flash on a fast page), the hint's first 12 s — or move the bar. With the animations removed the loader is simply
   there with a still bar and "Loading…". The hint's delay is a reveal, not motion: it is declared !important with a
   higher specificity than app.css's `*` rule, so it still waits its 12 s under reduced motion (not shown at once).
   The route strip (.as-route-progress) is the dashboard's: account.js shows it while /session.ui.loader, only after
   200 ms of waiting for a page; aria-hidden (the page's own "Loading…" and the focus on #main say it already). */

/* 1 ─ The loader: centred in #app (the dashboard's div, the auth document's main); the progressbar (.as-loader-meter:
   logo, bar, "Loading…") over the hint's polite live region (.as-loader-status, outside the busy progressbar) ── */
.as-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  min-block-size: min(60vh, 480px); padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--muted);
  font-size: 14px; opacity: 1; animation: as-loader-in 150ms linear;
}
.as-loader-meter { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.as-loader-meter > img { display: block; inline-size: 56px; block-size: 56px; }
.as-loader-bar {
  display: block; position: relative; inline-size: 160px; max-inline-size: 100%; block-size: 4px;
  overflow: hidden; border-radius: 2px; background: var(--line);
}
.as-loader-bar > span {
  display: block; inline-size: 40%; block-size: 100%; border-radius: inherit; background: var(--as-brand-600);
  animation: as-loader-slide 1.4s ease-in-out infinite;
}
.as-loader-text, .as-loader-hint { display: block; margin: 0; }
.as-loader-hint { color: var(--ink-2); visibility: visible; }
.as-loader .as-loader-hint { animation: as-loader-hint 12s steps(1) both !important; }

/* 2 ─ The language: the span of <html lang>, English for any other ─────────────────────────────────────────── */
.as-loader-text > span, .as-loader-hint > span { display: none; }
.as-loader-text > [lang="en"], .as-loader-hint > [lang="en"] { display: inline; }
:root:lang(ar) .as-loader-text > [lang="en"], :root:lang(ar) .as-loader-hint > [lang="en"],
:root:lang(ur) .as-loader-text > [lang="en"], :root:lang(ur) .as-loader-hint > [lang="en"] { display: none; }
:root:lang(ar) .as-loader-text > [lang="ar"], :root:lang(ar) .as-loader-hint > [lang="ar"],
:root:lang(ur) .as-loader-text > [lang="ur"], :root:lang(ur) .as-loader-hint > [lang="ur"] { display: inline; }
:root:lang(ar) .as-loader, :root:lang(ur) .as-loader { font-family: var(--font-ar); }

/* 3 ─ The dashboard's route strip (account.js) ─────────────────────────────────────────────────────────────── */
.as-route-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200; block-size: 3px; overflow: hidden;
  pointer-events: none;
}
.as-route-progress > span {
  display: block; inline-size: 40%; block-size: 100%; background: var(--as-brand-600);
  animation: as-loader-slide 1.4s ease-in-out infinite;
}

/* 4 ─ Direction, theme, forced colours, no script ──────────────────────────────────────────────────────────── */
:root[dir="rtl"] .as-loader-bar > span, :root[dir="rtl"] .as-route-progress > span {
  animation-name: as-loader-slide-rtl;
}
:root[data-theme="dark"] .as-loader-bar > span, :root[data-theme="dark"] .as-route-progress > span {
  background: var(--as-brand-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .as-loader-bar > span,
  :root:not([data-theme="light"]) .as-route-progress > span { background: var(--as-brand-300); }
}
@media (forced-colors: active) {
  .as-loader-bar { border: 1px solid CanvasText; }
  .as-loader-bar > span, .as-route-progress > span { forced-color-adjust: none; background: CanvasText; }
}
@media (scripting: none) {
  .as-loader { display: none; }
}

/* 5 ─ Keyframes: `from` (or a hold) only; the base styles above are the end state ──────────────────────────── */
@keyframes as-loader-in { from, to { opacity: 0; } }
@keyframes as-loader-hint { from { visibility: hidden; } to { visibility: visible; } }
@keyframes as-loader-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes as-loader-slide-rtl { from { transform: translateX(100%); } to { transform: translateX(-250%); } }