/* The two download pages: /download — one version, one button — and
   /download/history — every version with its digest. Loaded in addition to
   app.css and glass.css, by those pages alone, the same arrangement landing.css
   uses for /.

   The split between the two pages is the whole design. /download is the page you
   send to someone who has decided to install, so it says one version and offers
   one button; nothing that only matters to a second guesser is allowed to compete
   with it. The digest, the older builds and the update-API address all live on the
   history page, which is what the 历史版本 link is for. That page lists releases
   without serving them: it has no download control at all, so /download's single
   button is the only thing on the site that starts a download. */

/* ---------- the version, up front ---------- */

/* Mono and in the accent colour so "0.3.4" reads as a version and not as part of
   the product name sitting next to it. Sized by `.hero h1`, deliberately: the
   version should be the largest thing on the page, and the headline is where the
   page states which build you are about to get. */
.dlver {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -.02em;
}

/* The small line above the headline: what kind of download this is. */
.dlkicker {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 14px;
  letter-spacing: .06em;
}

/* ---------- 本次更新 ---------- */

/* Same measure as the history list: release notes are typed with their own line
   breaks and are short, so across the section's full 1120px the card reads as an
   empty letterbox. */
.dlnote {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 20px;
  /* Admin-authored free text from a textarea: the newlines it was typed with are
     part of it. pre-wrap rather than pre-line, matching the old release cards. */
  white-space: pre-wrap;
  /* Release notes quote paths — %LOCALAPPDATA%\Programs\DuiqiDock is 33 characters
     with no space in it — and pre-wrap alone will not break those, so at 360px the
     paragraph pushes the whole page into a horizontal scrollbar. anywhere, not
     break-word: only the former also relaxes the min-content size, which is what
     the card's width is being computed from. */
  overflow-wrap: anywhere;
}

/* ---------- 安装 ---------- */

/* `.grid` / `.fcard` come from glass.css. The two cards carry the facts that used
   to be two grey paragraphs above the list. */
.fcard code { font-size: 12.5px; }

/* ---------- the release list (/download/history) ---------- */

/* 1120px is a bad measure for a column of release notes and a 64-char digest, so
   the list inside the section is narrower. */
.relist { max-width: 820px; margin: 0 auto; }

.rels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Geometry only: the fill and the hairline are the `.glass` material, so the list
   can't drift away from the cards on the other page. */
.rel {
  border-radius: 16px;
  padding: 16px 18px;
}

/* Centred rather than baseline-aligned: the 最新 badge is a 17px pill next to a
   16px version, and a baseline-aligned pill sits noticeably high. */
.rel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rel-ver { font-family: var(--mono); font-size: 16px; font-weight: 600; }

.tag {
  font-size: 11px;
  line-height: 17px;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 7px;
}

/* Pushes the size and date to the right edge of the card. */
.rel-meta { margin-left: auto; color: var(--dim); font-size: 12px; }

.rel-notes { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* 64 hex chars: wrap mid-string instead of widening the card. */
.rel-sha { margin: 9px 0 0; color: var(--dim); font-size: 11px; word-break: break-all; }

/* ---------- narrow ---------- */

@media (max-width: 720px) {
  /* The date has nothing to sit against once the row wraps. */
  .rel-meta { margin-left: 0; }
}