/* App-wide loading / offline indicator — static/js/loading.js builds these nodes. Tokens only.
   The [hidden] rule is mandatory: a class rule that sets display beats the UA's [hidden] and the
   badge renders STUCK OPEN (CLAUDE.md, "overlay classes missing their [hidden] rule").
   The very top layer: the product runs past the highest layer a browser has and is clamped to it,
   above everything else on the page. A reader who asked for no motion sees a still bar and ring. */
.erp-ldbar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:calc(var(--z-modal) * var(--z-modal) * var(--z-modal));pointer-events:none;
  background:var(--accent)}
.erp-ld{position:fixed;left:50%;transform:translateX(-50%);z-index:calc(var(--z-modal) * var(--z-modal) * var(--z-modal));pointer-events:none;
  display:flex;align-items:center;gap:var(--sp-3);max-width:min(560px,92vw);padding:var(--sp-3) var(--ctl-pad-x) var(--sp-3) var(--sp-4);
  border-radius:var(--radius-card);background:var(--bar-bg);color:var(--bar-ink);
  font:var(--fw-medium) var(--fs-base)/var(--lh-base) var(--font-body);
  box-shadow:var(--shadow-elev)}
.erp-ld-top{top:100px}/* under the top bar and the search box (46 px + the control row, its box ends at 94): never over either */
.erp-ld-bottom{bottom:18px}
.erp-ld-body{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.erp-ld-txt{white-space:nowrap}
.erp-ld-sub{font:var(--fw-regular) var(--fs-sm)/var(--lh-base) var(--font-body);opacity:.92}
.erp-ld-spin{flex:0 0 var(--icon-ui);width:var(--icon-ui);height:var(--icon-ui);border-radius:var(--pill-radius);
  border:3px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color:var(--accent)}
.erp-ld-x{pointer-events:auto;flex:none;background:transparent;color:inherit;border:0;font:var(--fw-regular) var(--fs-title)/1 var(--font-body);
  width:var(--ctl-h-sm);height:var(--ctl-h-sm);border-radius:var(--ctl-radius);cursor:pointer;opacity:.7}
.erp-ld-x:hover{opacity:1;background:color-mix(in srgb, currentColor 12%, transparent)}
/* slow and offline: the status colour as the fill, the page's paper as the ink — it reads in both themes */
.erp-ld.is-slow{background:var(--tint-warning-fg, var(--bar-bg));color:var(--surface-1, var(--surface-keep))}
.erp-ld.is-slow .erp-ld-spin{border-top-color:currentColor}
.erp-ld.is-offline{background:var(--tint-danger-fg, var(--bar-bg));color:var(--surface-1, var(--surface-keep))}
.erp-ld.is-offline .erp-ld-spin{animation-play-state:paused;border-top-color:currentColor}
.erp-ld[hidden],.erp-ldbar[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){
  .erp-ldbar{width:40%;animation:erp-ldbar 1.1s ease-in-out infinite}
  .erp-ld-spin{animation:erp-ldspin .8s linear infinite}
}
@keyframes erp-ldbar{from{transform:translateX(-60%)}to{transform:translateX(210%)}}
@keyframes erp-ldspin{to{transform:rotate(360deg)}}
@media (max-width:767px){.erp-ld{max-width:94vw;padding:var(--field-pad-x) var(--sp-3);font-size:var(--fs-sm)}.erp-ld-top{top:10px}.erp-ld-bottom{bottom:72px}}