/* ---------- Logo loader: the scope mark, animated ----------
   The ring draws and turns, the four ticks blink in turn like a sweep,
   the pulse line traces, the bars rise one after another.
   Used full-page while the next page is on its way (_PageLoader) and
   small inside cards that fill in after the page opens. */
.cs-ld-ring { transform-origin: 24px 24px; stroke-dasharray: 116; animation: csLdDraw 2.4s ease-in-out infinite, csLdSpin 2.4s linear infinite; }
.cs-ld-tick { animation: csLdTick 1.2s ease-in-out infinite; }
.cs-ld-tick.t2 { animation-delay: .3s; }
.cs-ld-tick.t3 { animation-delay: .6s; }
.cs-ld-tick.t4 { animation-delay: .9s; }
.cs-ld-pulse { stroke-dasharray: 22; stroke-dashoffset: 22; animation: csLdTrace 1.2s ease-in-out infinite; }
.cs-ld-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: csLdBar 1.2s ease-in-out infinite; }
.cs-ld-bar.b2 { animation-delay: .15s; }
.cs-ld-bar.b3 { animation-delay: .3s; }
@keyframes csLdDraw { 0% { stroke-dashoffset: 116; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -116; } }
@keyframes csLdSpin { to { transform: rotate(360deg); } }
@keyframes csLdTick { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes csLdTrace { 0% { stroke-dashoffset: 22; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes csLdBar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Full page: over a soft blur, only once the next page is slow to arrive. */
.cs-pageloader { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    background: color-mix(in srgb, var(--app-surface, #fff) 72%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .2s ease; }
.cs-pageloader[hidden] { display: none; }
.cs-pageloader.is-on { opacity: 1; }
.cs-pageloader svg { width: 88px; height: 88px; filter: drop-shadow(0 10px 24px rgba(240, 52, 79, .28)); }
.cs-pl-text { font-family: var(--app-font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: .95rem; color: var(--app-ink, #171520); }

/* Small: inside a card that loads after the page; fades in late so a quick one never flashes. */
.cs-cardload { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--app-line, #e2e8f0); border-radius: 14px; background: var(--app-surface, #fff);
    opacity: 0; animation: csLdLate .25s ease .3s forwards; }
.cs-cardload svg { width: 34px; height: 34px; flex: none; }
.cs-cardload-text { font-size: .8rem; font-weight: 600; color: var(--app-mute, #64748b); }
@keyframes csLdLate { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .cs-ld-ring, .cs-ld-tick, .cs-ld-pulse { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .cs-ld-bar { animation-duration: 2.4s; }
}

/* Card loader sizes:
   .cs-cardload           a bordered card (a section that fills in later)
   .cs-cardload.is-inline no border, for table cells, lists and panels
   .cs-cardload.is-sm     smaller still, for dropdown menus
   .cs-cardload.is-block  big and centred, for a whole area that loads (e.g. a room) */
.cs-cardload.is-inline { display: inline-flex; border: 0; background: none; padding: .35rem 0; }
.cs-cardload.is-sm { display: inline-flex; border: 0; background: none; padding: .15rem 0; gap: .45rem; }
.cs-cardload.is-sm svg { width: 20px; height: 20px; }
.cs-cardload.is-sm .cs-cardload-text { font-size: .76rem; }
.cs-cardload.is-block { flex-direction: column; justify-content: center; gap: 1rem; min-height: 40vh; border: 0; background: none; animation-delay: .15s; }
.cs-cardload.is-block svg { width: 72px; height: 72px; filter: drop-shadow(0 10px 24px rgba(240, 52, 79, .25)); }
.cs-cardload.is-block .cs-cardload-text { font-family: var(--app-font-display, 'Space Grotesk', sans-serif); font-size: .92rem; font-weight: 700; color: var(--app-ink-soft, #403B4C); }
td > .cs-cardload { vertical-align: middle; }
/* .cs-ldicon  just the mark, 1.15em, for a busy button: the one loader everywhere. */
.cs-ldicon { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.22em; }
.cs-ldicon svg { width: 100%; height: 100%; }
/* On a button it takes the button's text colour, so it shows on a red primary button too. */
.btn .cs-ldicon circle, .btn .cs-ldicon path { stroke: currentColor; }
.btn .cs-ldicon rect { fill: currentColor; }