/* Info pages (security, download, about, contact, changelog, help, legal) and the article template.
   Values only from tokens.css. Linked from those pages and src/templates/article.html only. */

/* ---------- Page head ---------- */
.info-head { padding-block: var(--space-64) var(--space-48); }
.info-head > * + * { margin-top: var(--space-16); }
.info-head .lead { max-width: 60ch; }

/* ---------- Fact rows: a small heading on the left, plain text on the right ---------- */
.rows { padding-bottom: var(--space-112); }
.row {
  display: grid; gap: var(--space-12) var(--space-48);
  padding-block: var(--space-32); border-top: 1px solid var(--line-row);
}
.row:last-child { border-bottom: 1px solid var(--line-row); }
@media (min-width: 900px) { .row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding-block: var(--space-48); } }
.row-h { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--w-semibold); color: var(--text-1); }
.row-body { max-width: 65ch; color: var(--text-2); overflow-wrap: anywhere; }
.row-body > * + * { margin-top: var(--space-16); }
.row-body ul { padding-left: 1.25em; }
.row-body li + li { margin-top: var(--space-8); }
.row-body strong { color: var(--text-1); font-weight: var(--w-semibold); }

/* Key/value pairs (seller details, contact addresses) */
.kv { display: grid; gap: 0; margin: 0; }
.kv > div { display: grid; gap: var(--space-4); padding-block: var(--space-12); border-top: 1px solid var(--line-row); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 640px) { .kv > div { grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-16); } }
.kv dt { font-size: var(--fs-ui); font-weight: var(--w-medium); color: var(--text-3); }
.kv dd { margin: 0; color: var(--text-1); overflow-wrap: anywhere; }

/* ---------- Download ---------- */
.dl-grid { display: grid; gap: var(--space-16); }
@media (min-width: 900px) { .dl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dl-card { display: flex; flex-direction: column; gap: var(--space-16); }
.dl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); }
.dl-specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-row); }
.dl-specs li { display: flex; justify-content: space-between; gap: var(--space-16); padding-block: 10px; border-bottom: 1px solid var(--line-row); font-size: 14px; }
.dl-specs span:first-child { color: var(--text-3); }
.dl-specs span:last-child { color: var(--text-1); text-align: right; }
.dl-wait {
  display: grid; gap: var(--space-24); margin-top: var(--space-48);
  padding: var(--space-32) var(--space-24); border-top: 1px solid var(--line-row);
}
@media (min-width: 900px) { .dl-wait { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-inline: 0; } }
.dl-wait .actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* ---------- Changelog ---------- */
.log { list-style: none; margin: 0; padding: 0 0 var(--space-112); }
.log-entry {
  display: grid; gap: var(--space-12) var(--space-48);
  padding-block: var(--space-32); border-top: 1px solid var(--line-row);
}
.log-entry:last-child { border-bottom: 1px solid var(--line-row); }
@media (min-width: 900px) { .log-entry { grid-template-columns: 200px minmax(0, 1fr); } }
.log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.log-meta time { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.log-items { padding-left: 1.25em; max-width: 65ch; color: var(--text-2); }
.log-items li + li { margin-top: var(--space-8); }

/* ---------- Help / legal index ---------- */
.quick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.quick a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  min-height: 52px; padding: 0 var(--space-16);
  background: var(--l1); border: 1px solid var(--line-card); border-radius: var(--r-window);
  color: var(--text-1); font-size: var(--fs-body); font-weight: var(--w-medium); text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.quick a:hover { border-color: var(--line-hover); color: var(--text-1); }
.quick a span[aria-hidden] { color: var(--text-3); }
/* Full container width so the column starts at the same left edge as the page title; children cap the line length. */
.index-wrap { padding-bottom: var(--space-64); }
.index-wrap > * { max-width: 760px; }
.index-wrap > * + * { margin-top: var(--space-48); }
.index-foot {
  padding-block: var(--space-32) var(--space-112); border-top: 1px solid var(--line-row);
  color: var(--text-3); max-width: 65ch;
}
.index-foot > * + * { margin-top: var(--space-8); }

/* ---------- Article template (help + legal) ---------- */
.article .h1 { font-size: clamp(32px, 4.4vw, var(--fs-h2)); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.article-updated:has(time:empty) { display: none; }
.article .prose { overflow-wrap: break-word; }
.article .prose a { overflow-wrap: anywhere; }
.article .prose pre {
  overflow-x: auto; padding: var(--space-16); border: 1px solid var(--line-card); border-radius: var(--r-window);
  background: var(--l1); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono);
}
.article .prose pre code { padding: 0; background: none; font-size: inherit; }
.article .prose h2 { scroll-margin-top: 80px; }
.article .prose blockquote > * + * { margin-top: var(--space-8); }
.article-more {
  display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24);
  padding-top: var(--space-24); border-top: 1px solid var(--line-row); font-size: var(--fs-ui);
}
.article-more a { color: var(--text-3); text-decoration: none; }
.article-more a:hover { color: var(--text-1); }