/* Loading skeletons: grey outlines shaped like the content about to replace
 * them (task 2 of the "snappy" lane, 2026-09-23), in place of a bare
 * "Loading…" sentence. Reads app/tokens.css's spacing/radii tokens, so link
 * that first.
 *
 * Purely decorative -- every element this file styles is inserted with
 * aria-hidden="true" by app/skeleton.js. The actual loading state a screen
 * reader hears is the page's own aria-live region (every page that uses
 * this file already announces once when a load starts) plus aria-busy set
 * on the container being filled; a screen reader has no reason to read
 * through a pile of grey rectangles.
 *
 * The shimmer sweep only runs when the reader has not asked for reduced
 * motion. Under reduced motion the shapes still show (a still, flat block
 * still marks where content will land), just without the animation.
 */
.skel-wrap { display: block; }

.skel {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--panel2);
}
@media (prefers-reduced-motion: no-preference) {
  .skel {
    background: linear-gradient(90deg,
      var(--panel2) 25%, var(--border-strong) 37%, var(--panel2) 63%);
    background-size: 400% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
  }
}
@keyframes skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.skel-line { height: 0.85em; margin: var(--space-2) 0; }
.skel-line:first-child { margin-top: 0; }
.skel-line.lg { height: 1.15em; }
.skel-line.sm { height: 0.7em; }
.skel-line.w-25  { width: 25%; }
.skel-line.w-33  { width: 33%; }
.skel-line.w-50  { width: 50%; }
.skel-line.w-66  { width: 66%; }
.skel-line.w-75  { width: 75%; }
.skel-line.w-100 { width: 100%; }

/* a bordered card, standing in for a profile hero, a bill card, a single
   record -- the same shape as this page's own .card/section rule */
.skel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

/* a stand-in list row (alerts, the org review queue, search results) */
.skel-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 2px;
  border-top: 1px solid var(--border);
}
.skel-row:first-child { border-top: 0; }
.skel-row .skel-cell { flex: 1 1 auto; min-width: 0; }

.skel-chip    { width: 64px; height: 1.3em; border-radius: var(--radius-pill); flex: none; }
.skel-avatar  { width: 40px; height: 40px; border-radius: 50%; flex: none; }

/* a stand-in <table> row: each <td> this wraps gets its own bar so column
   widths keep reading as columns instead of one wide smear */
tr.skel-tr td { padding: 8px 10px; }
tr.skel-tr .skel-line { margin: 0; }