/* RealRacer.ai skeleton loaders.
 *
 * Replace "Loading…" text + spinner UX with v2-themed shimmer
 * placeholders that mimic the shape of the incoming content. The
 * skeleton lives in the initial HTML; the page's existing JS that
 * fills the container with real data atomically replaces it.
 *
 * Why this pattern (vs spinner): reduces perceived load time, prevents
 * layout jumps, and matches the "this is what's coming" UX shipped by
 * iOS / Linear / Vercel. Each skeleton column/row is exactly the
 * shape of its real counterpart so the transition is seamless.
 *
 * Honours prefers-reduced-motion — shimmer stops, plain dim surface
 * still indicates loading state.
 */

@keyframes rr-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel {
  /* Three-stop gradient sweeps across; size 200% gives room to slide. */
  background: linear-gradient(
    90deg,
    var(--surface-2, #14141c) 0%,
    var(--border,    #1c1c28) 50%,
    var(--surface-2, #14141c) 100%
  );
  background-size: 200% 100%;
  animation: rr-skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  /* Stop child text from rendering inside skeleton blocks — pages
     reuse their existing markup as the skeleton scaffold, so any
     fallback text gets hidden by inheritance. */
  color: transparent;
  /* Smother focus rings and link decorations on skeleton'd content. */
  user-select: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ── Line shapes — for text placeholders ──────────────────────── */
.skel-line {
  display: block;
  height: 14px;
  margin: 6px 0;
  border-radius: 3px;
}
.skel-line.is-xs { width: 30%; height: 10px; }
.skel-line.is-sm { width: 50%; }
.skel-line.is-md { width: 70%; }
.skel-line.is-lg { width: 90%; height: 18px; }
.skel-line.is-full { width: 100%; }

/* ── Block — for thumbnails / blocks ──────────────────────────── */
.skel-block {
  display: block;
  width: 100%;
  height: 80px;
  border-radius: 6px;
}

/* ── Circle — avatars / icon spots ────────────────────────────── */
.skel-circle {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
}

/* ── Pre-shaped card — wraps line/block primitives in a v2 panel,
       so a row of N looks like a row of N real cards. ──────────── */
.skel-card {
  background: var(--surface, #0d0d14);
  border: 1px solid var(--border, #1c1c28);
  border-radius: 12px;
  padding: 14px 16px;
  /* Cards themselves don't shimmer — only their inner .skel children
     do. Keeps the chrome stable. */
  pointer-events: none;
  /* Subtle pulse on the whole card so it still reads "loading" if
     somehow the inner children aren't visible (e.g. inside a hidden
     parent until measurement completes). */
}

/* ── Table-row skeleton — matches the laps-table rhythm ───────── */
.skel-table-row {
  display: table-row;
}
.skel-table-row td {
  /* Inner padding from the parent .laps-table th/td rule still
     applies; the skel-line inside the td provides the visible bar. */
  height: 36px;
  vertical-align: middle;
}

/* ── Stacked-rows wrapper — for vertical lists (ghost rows etc) ─ */
.skel-list { display: flex; flex-direction: column; gap: 10px; }
.skel-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--surface, #0d0d14);
  border: 1px solid var(--border, #1c1c28);
  border-radius: 10px;
}
.skel-list-row > .skel { flex-shrink: 0; }
.skel-list-row .skel-grow { flex: 1; min-width: 0; }