/* The download page.

   Two states, and they should not look like the same card with a word changed.
   An offered download leads with the button. A withheld one leads with the
   reason, because the reason is the only thing on offer. */

.dl-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-bg);
  padding: var(--beat-2, 2.427rem);
  margin: 0 0 var(--beat-2, 2.427rem);
}

.dl-card h2 {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--type-subheading, 1.7rem);
  letter-spacing: var(--tracking-tight);
}

.dl-summary {
  margin: 0 0 var(--beat-1, 1.5rem);
  color: var(--text-muted);
  max-width: 46ch;
  line-height: var(--leading-normal);
}

/* ── The button ───────────────────────────────────────────────────────────
   One target, sized to be unmissable, with the weight it is asking for
   printed on it. Nobody should have to guess whether a click costs 20 MB. */

.dl-button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid transparent;
  background: var(--accent-blue);
  color: #fff;
  font-weight: var(--weight-emphasis);
  text-decoration: none;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.dl-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.dl-button:active { transform: translateY(0); }
.dl-button:focus-visible { outline: 2px solid var(--text-main); outline-offset: 3px; }

.dl-button-size {
  font: var(--weight-body) 0.85em/1 var(--font-mono);
  opacity: 0.85;
}

/* ── Checking it ──────────────────────────────────────────────────────────
   The digest is full length on purpose: a truncated hash cannot be verified
   with, so printing one is decoration pretending to be diligence. */

.dl-check {
  margin-top: var(--beat-2, 2.427rem);
  padding-top: var(--beat-1, 1.5rem);
  border-top: 1px solid var(--border);
}

.dl-check h3,
.dl-conditions h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.dl-digest {
  margin: 0.5rem 0;
  font: var(--weight-body) 0.82rem/1.7 var(--font-mono);
  word-break: break-all;
  color: var(--text-main);
  user-select: all;
}

.dl-hint {
  margin: 0.25rem 0;
  font: var(--weight-body) 0.85rem/1.6 var(--font-mono);
  color: var(--text-muted);
}

/* ── Held back ────────────────────────────────────────────────────────────
   Stated plainly. A page that is coy about why there is no link reads as a
   page that is hiding a failure. */

.dl-held {
  margin: 0 0 0.5rem;
  font-size: var(--type-body, 1rem);
  font-weight: var(--weight-emphasis);
  color: var(--text-main);
}

.dl-card-held { border-style: dashed; }

/* ── The conditions ───────────────────────────────────────────────────────
   Each one names what was looked for and what was there instead. A failing
   condition also carries the reason it exists, because a rule with no reason
   attached is a rule somebody will eventually delete. */

.dl-conditions {
  margin-top: var(--beat-1, 1.5rem);
  padding-top: var(--beat-1, 1.5rem);
  border-top: 1px solid var(--border);
}

.dl-conditions ul { margin: 0; padding: 0; list-style: none; }

.dl-conditions li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0 0.6rem;
  padding: 0.45rem 0;
  align-items: start;
}

.dl-conditions li + li { border-top: 1px solid var(--border); }

.dl-mark { font: var(--weight-emphasis) 0.9rem/1.6 var(--font-mono); }
.is-pass .dl-mark { color: #4ade80; }
.is-fail .dl-mark { color: #f87171; }

.dl-conditions strong {
  display: block;
  font-size: 0.92rem;
  font-weight: var(--weight-emphasis);
}

.dl-detail,
.dl-why {
  display: block;
  font-size: 0.84rem;
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.dl-detail { font-family: var(--font-mono); word-break: break-word; }
.dl-why { margin-top: 0.2rem; font-style: italic; opacity: 0.85; }

.dl-provenance { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .dl-button { transition: none; }
  .dl-button:hover { transform: none; }
}

/* ---- what a file is for --------------------------------------------------
   A badge has to survive being skimmed, which means it cannot look like the
   decorative pills elsewhere on the site. Filled, warm, and set against the
   title rather than floated away from it. */
.dl-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.dl-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--accent-amber, #fbbf24);
  color: #17120a;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dl-badge-meaning {
  margin: -0.3rem 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: var(--leading-normal);
  /* The summary above this is capped at 46ch of body type. Uncapped, this
     paragraph ran past it, and a lower block that is wider than the one above
     it reads as a bug rather than a choice. 46 / 0.86 = 53.5, so 54ch at this
     size ends on the same edge. */
  max-width: 54ch;
}