/* App-wide loading / offline indicator — static/js/loading.js builds these nodes.
   Tokens follow app.css (--accent, --dark). 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"). */
.erp-ldbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483001;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--accent,#02c4c4) 30%,var(--accent,#02c4c4) 70%,transparent 100%);
  background-size:40% 100%;background-repeat:no-repeat;animation:erp-ldbar 1.1s ease-in-out infinite}
@keyframes erp-ldbar{0%{background-position:-40% 0}100%{background-position:140% 0}}
.erp-ld{position:fixed;left:50%;transform:translateX(-50%);z-index:2147483001;pointer-events:none;
  display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);padding:11px 14px 11px 16px;
  border-radius:14px;background:var(--brand-night);color:#fff;
  font:600 14px/1.35 'Montserrat','Segoe UI',system-ui,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset}
.erp-ld-top{top:76px}/* just under the 70px top bar: never over the search box or the user menu */
.erp-ld-bottom{bottom:18px}
.erp-ld-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.erp-ld-txt{white-space:nowrap}
.erp-ld-sub{font-weight:500;font-size:12.5px;line-height:1.4;opacity:.92}
.erp-ld-spin{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--accent,#02c4c4);animation:erp-ldspin .8s linear infinite}
@keyframes erp-ldspin{to{transform:rotate(360deg)}}
.erp-ld-x{pointer-events:auto;flex:none;background:transparent;color:#fff;border:0;font-size:20px;line-height:1;
  width:26px;height:26px;border-radius:7px;cursor:pointer;opacity:.7}
.erp-ld-x:hover{opacity:1;background:rgba(255,255,255,.12)}
.erp-ld.is-slow{background:#7a4b00}
.erp-ld.is-slow .erp-ld-spin{border-top-color:var(--tint-warning-line,#ffb347)}
.erp-ld.is-offline{background:#8f1d1d}
.erp-ld.is-offline .erp-ld-spin{animation:none;border-color:rgba(255,255,255,.25);border-top-color:var(--tint-danger-line,#ffb4b4)}
.erp-ld[hidden],.erp-ldbar[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.erp-ldbar,.erp-ld-spin{animation:none}.erp-ldbar{background-size:100% 100%}}
@media (max-width:767px){.erp-ld{max-width:94vw;padding:10px 12px;font-size:13.5px}.erp-ld-top{top:10px}.erp-ld-bottom{bottom:72px}}
