/* ==========================================================================
   NEXUS — Downloads page (/downloads/)

   The dark ground and every shared component come from dark.css, which loads
   first. This sheet adds only the file card.

   A card is a raised #171717 panel on the black ground — separation by surface
   value, no border (DESIGN.md §0.4.2). The facts are a short labelled list,
   because what a reader decides on before downloading 6.6 MB is what it covers,
   which language it is in, and how big it is.

   Loaded via `pageStyles: ["dark", "downloads"]`.
   ========================================================================== */

.page--dark .dl-list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  max-inline-size: 1040px;
}

.page--dark .dl-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5) var(--s-6);
  align-items: start;
  padding: var(--s-6);
  background: var(--c-raised);
  border-radius: var(--radius-dark-card);
}
@media (min-width: 900px) {
  .page--dark .dl-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--s-6) var(--s-7); }
}

.page--dark .dl-card__badge {
  display: grid;
  place-items: center;
  inline-size: 60px;
  block-size: 74px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-dark-ui);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-invert);
}

.page--dark .dl-card__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-invert);
}

.page--dark .dl-card__facts { margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.page--dark .dl-card__facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); }
.page--dark .dl-card__facts dt {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--c-muted);
}
.page--dark .dl-card__facts dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--c-invert); }

.page--dark .dl-card__action { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) {
  .page--dark .dl-card__action { grid-column: auto; }
}
.page--dark .dl-card__action:link,
.page--dark .dl-card__action:visited { color: var(--c-ink); }
.page--dark .dl-card__action { transition: background-color var(--dur-micro) var(--ease-state); }
@media (hover: hover) and (pointer: fine) {
  /* Hover brightens the button to the bright logo blue; the ink label on it
     is 7.9:1. */
  .page--dark .dl-card__action:hover { background: var(--c-accent-on-dark); border-color: var(--c-accent-on-dark); opacity: 1; }
}

/* English first, then Traditional Chinese: two short sections, one rhythm. */
.page--dark .dl-group + .dl-group { padding-top: 0; }

@media (max-width: 767px) {
  .page--dark .dl-card { padding: var(--s-5); gap: var(--s-4); }
  .page--dark .dl-card__badge { inline-size: 48px; block-size: 60px; }
  .page--dark .dl-card__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page--dark .dl-card__action { inline-size: 100%; }
}