/* /download only. Link after /orca.css. */

.download-page .eyebrow { margin-bottom: var(--space-3); }

/* How the pieces fit: two numbered steps. */
.steps { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.steps li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.steps h2 { font-size: var(--text-base); }
.steps p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.steps__n {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font: var(--weight-bold) var(--text-sm) / 1 var(--font-mono);
}

/* Rows rise in one after another. */
.download { animation: download-rise var(--dur-slower) var(--ease-out) both; }
.download:nth-child(2) { animation-delay: 70ms; }
.download:nth-child(3) { animation-delay: 140ms; }
.download:nth-child(4) { animation-delay: 210ms; }
.download img { transition: transform var(--dur-slow) var(--ease-spring); }
.download:hover img { transform: rotate(-4deg) scale(1.06); }
@keyframes download-rise { from { opacity: 0; transform: translateY(12px); } }

/* Loading: two shimmering placeholder rows until downloads.js fills the list. */
.download-list:empty { min-height: calc(2 * 7.5rem + var(--space-3)); }
.download-list:empty::before, .download-list:empty::after {
  content: ""; display: block; height: 7.5rem; border-radius: var(--radius-xl);
  background: linear-gradient(90deg, var(--surface-sunken) 30%, light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.06)) 50%, var(--surface-sunken) 70%) 0 0 / 300% 100%;
  animation: download-shimmer 1.4s var(--ease-in-out) infinite;
}
.download-list:empty::after { margin-top: var(--space-3); opacity: 0.6; }
@keyframes download-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* downloads.js's fallback row ("Downloads are unavailable right now.") has no heading. */
.download:not(:has(h3)) { grid-template-columns: 1fr; text-align: center; border-style: dashed; color: var(--text-muted); }

.download-note { margin-top: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }
.download-note:empty { display: none; }