/* The Aisleful loading screen. It is in each page's HTML, so it shows before the app's code arrives, and the app shows the same markup while it signs in and
   loads, so nothing flashes between the two. Pages an agency's guests open leave the wordmark out (class "neutral"): they never see the Aisleful name. */
.splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #F6F3EC; color: #13203A; }
html[data-theme="colour"] .splash { background: #EFE7D3; }
html[data-theme="dark"] .splash { background: #13203A; color: #F2EEE4; }
.splash img { display: block; width: 168px; height: auto; }
.splash .wm-light { display: none; }
html[data-theme="dark"] .splash .wm-ink { display: none; }
html[data-theme="dark"] .splash .wm-light { display: block; }
.splash-line { position: relative; display: block; width: 132px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(19, 32, 58, .14); }
html[data-theme="dark"] .splash-line { background: rgba(242, 238, 228, .18); }
.splash-line::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 2px; background: #E3B867; animation: splash-run 1.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes splash-run { from { transform: translateX(-105%); } to { transform: translateX(265%); } }
@media (prefers-reduced-motion: reduce) { .splash-line::after { animation: none; width: 100%; opacity: .55; } }
.splash-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The same bar, small, for a part of a page that is loading. */
.pl-loading { display: flex; align-items: center; gap: 12px; }
.pl-loading .splash-line { width: 56px; background: rgba(120, 120, 120, .22); }