/* css/components/mission-card-skeleton.css — TinkyTown SDR
 *
 * Loading skeleton for the home dashboard's Today's Missions section.
 * Three placeholder cards while /api/missions/daily is in flight. The
 * shimmer is purely cosmetic and is killed by prefers-reduced-motion
 * (vestibular safety). Visual rhythm mirrors a real mission card:
 * header strip → why block → meta rows → action row.
 *
 * Linked from /js/views/home.js's ensureStylesheet(). Split from
 * mission-card.css to keep that file under the ≤260-line budget.
 *
 * Brand tokens: --surface-deep · --amber · --text-muted (no raw hex).
 */

.home-missions-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .home-missions-skeleton { grid-template-columns: 1fr; }
}

.home-missions-skeleton-card {
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--surface-deep, #0d0b10) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber, #e8a33d) 12%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 220px;
}

.home-missions-skeleton-bar {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-muted, #8d877d) 10%, transparent) 0%,
    color-mix(in srgb, var(--text-muted, #8d877d) 22%, transparent) 50%,
    color-mix(in srgb, var(--text-muted, #8d877d) 10%, transparent) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  height: 12px;
  animation: home-missions-shimmer 1400ms ease-in-out infinite;
}
.home-missions-skeleton-bar.tall  { height: 18px; width: 70%; }
.home-missions-skeleton-bar.full  { width: 100%; }
.home-missions-skeleton-bar.short { width: 45%; }
.home-missions-skeleton-bar.btn   { height: 40px; border-radius: 10px; }

.home-missions-skeleton-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}
.home-missions-skeleton-actions .home-missions-skeleton-bar { flex: 1 1 auto; }

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

/* Vestibular / reduced-motion safety — kill the shimmer. */
@media (prefers-reduced-motion: reduce) {
  .home-missions-skeleton-bar { animation: none; }
}

/* Print: skeletons are meaningless on paper. */
@media print {
  .home-missions-skeleton { display: none; }
}