/* OmniModi vNext — Skeleton loading states (T2.6, Round 4).
 *
 * WHAT THIS FILE IS FOR (read this if you are non-technical):
 * ------------------------------------------------------------
 * When a page first loads, it has to ask the database (Supabase)
 * for real data (a pupil's classes, a school's teacher list, the
 * marketplace's packs, etc). That can take anywhere from a few
 * milliseconds to a couple of seconds depending on someone's
 * connection. Instead of showing a blank, empty-looking page while
 * we wait, we show a "skeleton": grey placeholder shapes in roughly
 * the same size/position as the real content, with a soft shimmer
 * animation moving across them. This is the same pattern you'll
 * recognise from LinkedIn, YouTube, or Facebook while their pages
 * load.
 *
 * HOW TO USE THIS FROM A PAGE'S JAVASCRIPT:
 *   1. Before the Supabase fetch starts, put some skeleton markup
 *      into the container that will later hold real content, e.g.:
 *        container.innerHTML = '<div class="skeleton-card">' +
 *          '<div class="skeleton skeleton-avatar"></div>' +
 *          '<div class="skeleton skeleton-text"></div>' +
 *          '<div class="skeleton skeleton-text short"></div>' +
 *        '</div>';
 *   2. When the real data comes back, replace that innerHTML with
 *      the real rendered content (exactly like every other render*
 *      function in this codebase already does — the skeleton is
 *      just what goes in *before* that happens).
 *
 * CLASSES:
 *   .skeleton           -- the shimmering grey box itself. Combine
 *                          with one of the shape classes below (or
 *                          write ad-hoc inline width/height styles
 *                          for a one-off shape).
 *   .skeleton-text       -- a single line of placeholder text
 *                          (short, rounded bar). Add ".short" for a
 *                          half-width variant (useful for a second/
 *                          third line so a text block doesn't look
 *                          like a solid grey rectangle).
 *   .skeleton-avatar     -- a small circle, for profile
 *                          pictures/initials bubbles.
 *   .skeleton-card       -- a whole placeholder card (matches the
 *                          rounded-rect + border look of this
 *                          codebase's real .card/.stat-card
 *                          elements) that skeleton-text/avatar
 *                          pieces can be placed inside.
 *
 * ACCESSIBILITY:
 *   - Respects prefers-reduced-motion: if the user's OS/browser has
 *     asked for reduced motion, the shimmer sweep is turned off and
 *     skeletons just show as a plain solid grey block instead (see
 *     the @media block at the bottom of this file). This mirrors
 *     the same prefers-reduced-motion handling already used in
 *     a11y.css.
 *   - Skeletons are purely decorative placeholders, so they don't
 *     need any ARIA roles themselves; the container they sit in
 *     should already carry (or should be given) an
 *     aria-busy="true" attribute while loading, and the calling
 *     page can announce "Loading…" / "Loaded" via the shared
 *     #aria-status live region from a11y.css if a spoken
 *     announcement is useful on that page.
 */

.skeleton {
  /* Uses this codebase's existing --surface-2/--surface-3 theme
     tokens (defined in style.css, one value per light/dark theme)
     so skeletons automatically match whichever theme is active
     without this file needing its own light/dark overrides. */
  background-color: var(--surface-2);
  background-image: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius);
  animation: shimmer 1.4s ease-in-out infinite;
  /* Prevents any stray text content from showing through/affecting
     layout if a skeleton element is ever given innerHTML by mistake. */
  color: transparent;
}

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

/* A single placeholder line of "text". Default width suits a normal
   line; add class="short" for a shorter final line in a paragraph
   so a block of skeleton-text doesn't read as one solid rectangle. */
.skeleton-text {
  display: block;
  height: 0.85em;
  width: 100%;
  margin: 0.35em 0;
}
.skeleton-text.short {
  width: 55%;
}

/* A circular placeholder for a profile picture / initials bubble. */
.skeleton-avatar {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* A whole placeholder card -- matches the rounded-rect + border look
   of this codebase's real .card/.stat-card elements (see style.css)
   so a grid of skeleton-cards sits at the same size/spacing as the
   real cards that will replace it. Note: skeleton-card itself is the
   OUTER wrapper (border + padding + background), NOT the shimmering
   part -- put .skeleton / .skeleton-text / .skeleton-avatar pieces
   *inside* it for the actual shimmer shapes. */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* T2.6 a11y requirement: users who have asked their OS/browser for
   reduced motion should not see the shimmer sweep at all -- just a
   plain, static grey block in the same shape. This matches the
   prefers-reduced-motion handling already used elsewhere in
   a11y.css for this codebase's other animations. */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background-image: none;
    background-color: var(--surface-3);
  }
}