/*
 * SIGNAL loader — the ONE shared loading screen, used by every loading surface
 * (FREE / STRATEGY / TECH onboarding + the dashboard's Scan-now swap). D21 shared
 * component, but deliberately SELF-CONTAINED (its own file, namespaced classes, no
 * shared globals) so the lightweight funnel pages can load it without dragging in the
 * heavy report-components.* layer (which collides with their local escHtml/scoreColor/
 * DIM_ORDER — the D58 reason the FREE report stays off the shared layer).
 *
 * Paired with /signal-loader.js (signalLoaderHtml / signalLoaderStepsStart /
 * signalMarkHtml). Colors come from each page's brand vars (--blue/--linen/--grey/
 * --border-dark/--near-black) — every host already defines them.
 *
 * Brand (Gordon, 2026-06-26): a centered SIGNAL lockup — the radar mark LEFT of the
 * "SIGNAL." title (large linen) with an "AI Powered Assistance" eyebrow — then a
 * first-person contextual subtext, then the live step list.
 */

/* ── The SIGNAL mark (radar rings + sweep + center). Base lives here so every page —
 *    not just the dashboard — can render it. The dashboard's drawer/assistant/CTA marks
 *    reuse these same classes. ── */
.sig-mark { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.sig-mark.sig-sm { width: 40px; height: 40px; }
.sig-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; }
.sig-ring.r1 { width: 100%; height: 100%; border: 1px solid rgba(74,143,217,0.40); }
.sig-ring.r2 { width: 66%; height: 66%; border: 0.5px solid rgba(74,143,217,0.22); }
.sig-core { position: absolute; top: 50%; left: 50%; width: 26%; height: 26%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--blue); }
.sig-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(74,143,217,0.55), rgba(74,143,217,0) 95deg, transparent 360deg); opacity: 0; }
/* One-shot intro sweep (drawer open). The loader uses the continuous spin below instead. */
.sig-mark.spin .sig-sweep { animation: sig-spin 4s ease-in-out; }
@keyframes sig-spin { 0% { opacity: 0; transform: rotate(0deg); } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: rotate(720deg); } }
/* .working = continuous spin while SIGNAL is processing (editor Draft/Revise + onboarding). Reusable global. */
.sig-mark.working .sig-sweep { animation: sig-work-spin 1.3s linear infinite; opacity: 1; }
@keyframes sig-work-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sig-mark.working .sig-sweep { animation: none; opacity: 1; } }
.sig-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 21px; font-weight: 700; color: var(--blue); line-height: 1; }
.sig-mark.sig-sm .sig-num { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .sig-mark.spin .sig-sweep { animation: none; } }

/* ── The loading screen ── */
/* .sigload = centered content block (in-page loaders). Add .sigload-overlay for the
   full-screen dark takeover (the Scan-now swap over the dashboard). */
.sigload { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; }
.sigload-overlay { position: fixed; inset: 0; z-index: 60; justify-content: center; background: var(--near-black); }

/* The SIGNAL lockup — mark LEFT of the eyebrow+title, scaled up, centered as a group. */
.sigload-lockup { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.sigload-mark { width: 78px; height: 78px; }
.sigload-id { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.sigload-eyebrow { font-size: 11px; letter-spacing: 0.5px; color: var(--grey); margin: 0 0 0.3rem; }
.sigload-title { font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--linen); margin: 0; }

/* Contextual first-person subtext, below the lockup. */
.sigload-sub { font-size: 15px; color: rgba(244,244,242,0.7); line-height: 1.6; max-width: 460px; margin: 1.6rem auto 0; }
.sigload-sub b { color: var(--linen); font-weight: 700; }

/* The live step list — dim → active (linen) → done (blue). width:fit-content so the box hugs
   the longest line and CENTERS as a block (margin auto) while each line stays left-justified —
   otherwise a fixed-width box leaves the left-aligned text clustered left-of-centre. */
.sigload-steps { list-style: none; width: fit-content; max-width: 340px; text-align: left; margin: 2.4rem auto 0; padding: 0; }
.sigload-steps li { padding: 0.65rem 0; border-bottom: 0.5px solid var(--border-dark); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(244,244,242,0.3); transition: color 0.35s; }
.sigload-steps li:last-child { border-bottom: none; }
.sigload-steps li.active { color: var(--linen); }
.sigload-steps li.done { color: var(--blue); }

/* Continuous spin while the loader is up (distinct from the one-shot .spin intro). */
.sigload-mark .sig-sweep { opacity: 1; animation: sigload-spin 3.2s linear infinite; }
@keyframes sigload-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sigload-mark .sig-sweep { animation: none; opacity: 0.55; } }