/* src/pages/download/download.css — the /download page, and only that page.
 *
 * The directory is the switch (pipeline/emit.mjs ▸ writePageAssets): this file
 * becomes /pages/download.css, linked on /download alone. Tokens only — no
 * literal colours (site/www/CLAUDE.md). No motion: the page is a few lines of
 * type, and an editorial register has nothing to animate.
 *
 * Mobile-first. Nothing here can overflow 320px: the measure is capped in `ch`
 * but never wider than the viewport, and no string on the page is unbreakable.
 *
 * The coming-soon badge is NOT styled here. `.badge` / `.badge--coming-soon` are
 * the shared component in src/css/components.css; this file only places it.
 *
 * ⚠️ `:where(.download) p` IS ZERO-SPECIFICITY ON PURPOSE. As `.download p`
 * (0,1,1) it beat every `.download-*` class (0,1,0), so the lede's size and the
 * status's ink never applied. Under `:where()` the element rule is (0,0,1) and
 * each class below wins, with no qualified selectors to keep in step.
 */

.download {
  max-width: min(100%, 56ch);
  padding-block: 0 var(--space-5);
}

:where(.download) p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}

/* ⭐ THE LEDE IS THE PAGE'S FIRST SENTENCE, ONE STEP UP — not a second heading.
 * The shell's <h1> "Download" is the page's name; this is what it says. Same
 * column, a size between body and h3, at the bright tier. */
.download-lede {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--text-bright);
}

/* What it is and how to ask sit in the full text tier; the requirement line
 * stays one step quieter. */
.download-status,
.download-try {
  color: var(--text-primary);
}

.download-needs { font-size: 0.9375rem; }

/* A small gap above the badge; the badge itself is the shared component. */
.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-4) 0;
}