/* skeleton.css — Placeholder geometry while content loads. Block alias: .skeleton
   Markup:   <div class="skeleton-group" aria-busy="true">
               <span class="sr-only" role="status">Loading vehicle list…</span>
               <div aria-hidden="true"> ….skeleton blocks… </div></div>
   Shapes:   .skeleton--text (one line; widths .skeleton--w-40 | -60 | -80 | default 100%) | .skeleton--heading
             | .skeleton--avatar (circle) | .skeleton--media (16:9 block) | .skeleton--cell (table cell bar)
   Layouts:  .skeleton-card (media + lines, matches .card), .skeleton-table (rows with --density cell padding)
   Motion:   shimmer sweeps every 1.5s; base.css stops it under reduced motion (static blocks remain). */
@layer components {
  .skeleton-group { display: grid; gap: var(--space-3); }

  .skeleton {
    display: block;
    inline-size: 100%;
    block-size: var(--space-4);
    border-radius: var(--radius-sm);
    background:
      linear-gradient(to right, transparent 0%, var(--color-bg-subtle) 50%, transparent 100%) 0 0 / 50% 100% no-repeat,
      var(--color-bg-muted);
    animation: skeleton-shimmer calc(var(--motion-duration-slower) * 3) var(--motion-easing-standard) infinite;
  }
  .skeleton--text { block-size: 1em; }
  .skeleton--heading { block-size: var(--space-6); inline-size: 60%; }
  .skeleton--w-40 { inline-size: 40%; }
  .skeleton--w-60 { inline-size: 60%; }
  .skeleton--w-80 { inline-size: 80%; }
  .skeleton--avatar {
    inline-size: var(--size-control-md);
    block-size: var(--size-control-md);
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }
  .skeleton--media { block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
  .skeleton--cell { block-size: var(--space-3); }

  .skeleton-row { display: flex; align-items: center; gap: var(--space-3); }
  .skeleton-lines { flex: 1; display: grid; gap: var(--space-2); }

  .skeleton-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-elevation-surface-raised);
  }

  .skeleton-table { display: grid; border: var(--border-width-thin) solid var(--color-border-default); border-radius: var(--radius-md); }
  .skeleton-table__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-4);
    padding-block: var(--density-comfortable-cell-padding-y);
    padding-inline: var(--space-4);
    border-block-end: var(--border-width-thin) solid var(--color-border-default);
  }
  .skeleton-table__row:last-child { border-block-end: 0; }
  .skeleton-table__row--head { background: var(--color-bg-subtle); }
  [data-density="compact"] .skeleton-table__row { padding-block: var(--density-compact-cell-padding-y); }

  .skeleton:dir(rtl) { animation-direction: reverse; }

  @media (forced-colors: active) {
    .skeleton { background: Canvas; border: var(--border-width-thin) solid GrayText; }
  }
}

@keyframes skeleton-shimmer {
  from { background-position: -100% 0, 0 0; }
  to { background-position: 200% 0, 0 0; }
}