/* Download page — the only rules that are not in the shared shell.
   Everything here exists because the page's script needs it, not for decoration. */

/* The two installer buttons. applyPlatform() reorders them and toggles `secondary`
   to move the emphasis, so both carry .btn-primary in the markup and `secondary`
   demotes one back to the default surface. Styling the demotion rather than the
   promotion means the script never has to add a class that might not exist. */
.dl-row { display: flex; flex-wrap: wrap; gap: var(--ar-s-3); margin-bottom: var(--ar-s-4); }
.dl-btn { gap: var(--ar-s-3); }
.dl-btn.secondary {
  background: var(--ar-panel); border-color: var(--ar-line-2);
  color: var(--ar-text); font-weight: 400;
}
.dl-btn.secondary:hover { background: #313131; border-color: var(--ar-text-2); }

/* Version line. The script writes it as <span>macOS v1.1.0 · 54.7 MB</span>·<span>…</span>
   with a bare interpunct between the spans, so the separator needs the spacing. */
.version-info {
  margin: 0; font-family: var(--ar-font-mono); font-size: 11px;
  letter-spacing: .06em; color: var(--ar-text-2);
}
/* The interpunct between the two spans is a bare text node the script emits, so the
   space has to come from the spans themselves - without this it renders "MB·Windows". */
.version-info span { margin-right: .45em; }
.version-info span + span { margin-left: .45em; }
/* Set by the script when both appcasts fail to load. */
.version-info.err, .err { color: var(--ar-amber); }

/* Platform panels. is-active is toggled by activateTab(); this is the whole
   mechanism, so it stays terse and obvious. */
.platform-panel { display: none; }
.platform-panel.is-active { display: block; }
.platform-panel .duo { border: var(--ar-border); }

/* Tick list for the requirements. The old markup carried a literal ✓ in a span per
   item; a marker keeps the checkmark out of the copy and out of screen readers. */
.prose ul.ticks { list-style: none; padding-left: var(--ar-s-5); }
.prose ul.ticks li { position: relative; }
.prose ul.ticks li::before {
  content: "\2713"; position: absolute; left: calc(var(--ar-s-5) * -1);
  color: var(--ar-green); font-size: 0.95em;
}

/* --- Platform tabs -------------------------------------------------------- */
/* These carry the shared .sw segmented-control styling, which is sized for a compact
   control. Stretched across the full band, two 11px labels in a 570px-wide slab each read
   as an afterthought - and choosing your OS is the most important decision on this page.
   Bigger label, and the control stops spanning the whole width so it looks like a control
   rather than two empty bars. */
.switch-row:has(.platform-tab) { max-width: 440px; }
.platform-tab { font-size: 13px; letter-spacing: .04em; padding: 14px 18px; }
@media (max-width: 480px) { .switch-row:has(.platform-tab) { max-width: none; } }