/*
 * Skeletons (README "Skeletons", S-04, S-12): neutral-300 bars (14px titles, 10px meta) in rows
 * that fade from opacity 1 down to 0.4. Rows reuse the page's --list-cols grid so the skeleton
 * matches the list it stands in for.
 */
@layer components {
  .skeleton-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .skeleton-row {
    display: grid;
    grid-template-columns: var(--list-cols, minmax(0, 2.6fr) 84px 120px 120px minmax(0, 1.7fr) 210px);
    align-items: center;
    gap: 0 14px;
    min-height: 62px;
    padding: 8px 20px;
    border-radius: var(--radius-row);
    background: var(--color-surface);
  }
  .skeleton-row:nth-child(2) { opacity: 0.85; }
  .skeleton-row:nth-child(3) { opacity: 0.7; }
  .skeleton-row:nth-child(4) { opacity: 0.55; }
  .skeleton-row:nth-child(n + 5) { opacity: 0.4; }

  /* S-12: bars packed left to right instead of on the list's column grid. */
  .skeleton-rows--packed .skeleton-row {
    display: flex;
    gap: 20px;
    min-height: 58px;
  }
  .skeleton-rows--packed .skeleton-row:nth-child(2) { opacity: 0.8; }
  .skeleton-rows--packed .skeleton-row:nth-child(3) { opacity: 0.6; }
  .skeleton-rows--packed .skeleton-row:nth-child(n + 4) { opacity: 0.4; }

  .skeleton-row__main { display: flex; flex-direction: column; gap: 8px; }
  .skeleton-row__end { display: flex; justify-content: flex-end; }

  .skeleton {
    display: block;
    height: 14px;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-300);
    animation: skeleton-pulse 1.6s ease-in-out infinite;
  }
  /* A slow breath while the content loads. */
  @keyframes skeleton-pulse {
    50% { opacity: 0.55; }
  }
  .skeleton--meta { height: 10px; width: 35%; }
  .skeleton--title { width: 70%; }
  .skeleton--xs { width: 40px; }
  .skeleton--sm { width: 80px; }
  .skeleton--md { width: 120px; }
  .skeleton--lg { width: 160px; }
  .skeleton--xl { width: 200px; }
  .skeleton--w100 { width: 100px; }
  .skeleton--chip { width: 140px; height: 24px; }
  .skeleton--chip-sm { width: 110px; height: 24px; }
  .skeleton--btn { width: 150px; height: 38px; }
  .skeleton--num { width: 30%; height: 40px; border-radius: 12px; }
  .skeleton--w40 { width: 40%; height: 12px; }
  .skeleton--w70 { width: 70%; height: 12px; }

  .skeleton-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .skeleton-card:nth-child(2) { opacity: 0.8; }
  .skeleton-card:nth-child(n + 3) { opacity: 0.6; }

  @media (max-width: 767px) {
    .skeleton-row {
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 12px 16px;
    }
    .skeleton-row > :not(.skeleton-row__main, .skeleton-row__end) { display: none; }
    .skeleton-rows--packed .skeleton-row > :nth-child(-n + 2) { display: block; }
    .skeleton--btn { width: 64px; height: 28px; }
    .skeleton-cards { grid-template-columns: minmax(0, 1fr); }
  }
}