/* /versions (public/versions.php): the app's history, one card a version.
   Built on site.css's colours and type and the walk pages' head, as devices.css is; nothing here changes another page. */

.version-index { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.version-index a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.version-index a:hover { color: var(--pine); border-color: var(--pine); }

.version-list { display: grid; gap: 18px; padding-top: 26px; max-width: 860px; }
.version-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px 18px; scroll-margin-top: 90px; }
.version-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.version-page .version-head h2 { font-size: 26px; margin: 0; }
.version-date { margin: 0; font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.version-date.is-review { font: 700 11.5px/1 var(--sans); letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; background: #E4ECF6; color: #1F4B7A; }
.version-headline { margin: 8px 0 4px; font-size: 17px; color: var(--ink-soft); }
.version-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.version-notes li { padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 15.5px; line-height: 1.55; max-width: 72ch; }
.version-notes strong { font-weight: 700; }
.version-note { margin: 22px 0 0; color: var(--ink-soft); max-width: 72ch; font-size: 15px; }

@media (max-width: 480px) {
  .version-card { padding: 18px 16px 12px; }
  .version-page .version-head h2 { font-size: 23px; }
}