/* ==========================================================================
   download.css — /download/, after site.css and help.css

   Two apps with a public download, and an honest line for every other
   device. The parts come from the guide (help.css: the hero, the panel head
   and its icon, the state chips) and from site.css (the card, the filled
   button, the numbered steps, the footnote). This file holds only what
   those do not already say: the page's width, the download cards' inner
   rhythm, the folded checksum, and the row of other devices.
   ========================================================================== */

body[data-page="download"] {
  overflow-x: clip;
  overflow-wrap: break-word;
}

/* The legal pages' measure: wide enough for the other devices' cards in a
   row, narrow enough that each download card still reads as one thing. */
body[data-page="download"] .sheet {
  max-width: calc(820px + 2 * var(--gutter));
  padding-top: clamp(20px, 5vh, 48px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 56px);
}

body[data-page="download"] .rail-inner {
  max-width: calc(820px + 2 * var(--gutter));
}

.download-hero h1 {
  max-width: 12ch;
}

/* ---- The Mac and Windows ------------------------------------------------ */

.download-card {
  margin-top: clamp(32px, 6vw, 56px);
  padding: clamp(24px, 4vw, 36px);
}

.download-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.download-card .state .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

/* site.css's filled button fills its column; on a wide card a 700-pixel
   bar reads as a banner rather than a button, so it stops at a thumb's
   reach of text. */
.download-button {
  max-width: 360px;
}

.download-button .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.download-meta {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.download-help {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.download-help a {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(124 92 255 / 0.45);
  text-underline-offset: 3px;
}

/* Who signed it: the sentence a careful person looks for before opening a
   remote-control app from a website. Green, as every
   "this is safe" mark on the site is (site.css .footnote svg). */
.download-trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid rgb(53 211 153 / 0.22);
  border-radius: var(--radius-inset);
  background: rgb(53 211 153 / 0.06);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

.download-trust .icon {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--ok);
}

/* The SHA-256, for the few who check, folded away from the many who do
   not. <details> opens without a script. */
.checksum {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.checksum summary {
  width: fit-content;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}

.checksum p {
  margin: 10px 0 8px;
}

.checksum code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.checksum-value {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* ---- Other devices ------------------------------------------------------ */

.download-others {
  margin-top: clamp(48px, 8vw, 80px);
}

.download-others h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.download-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .download-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.download-other {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
}

.download-other .panel-icon {
  width: 42px;
  height: 42px;
  margin-top: 0;
  border-radius: 13px;
}

.download-other .panel-icon .icon {
  width: 22px;
  height: 22px;
}

.download-other h3 {
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.download-other .state {
  align-self: flex-start;
  margin-top: 10px;
}

/* The sentence takes the slack, so the links line up along the
   bottom of the row however long each sentence runs. */
.download-other p:not(.state) {
  flex: 1;
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.download-other strong {
  color: var(--ink);
  font-weight: 650;
}

.download-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 16px;
  color: var(--accent-2);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
}

.download-link .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--fast) var(--ease);
}

@media (hover: hover) {
  .download-link:hover span {
    text-decoration: underline;
    text-decoration-color: rgb(124 92 255 / 0.45);
    text-underline-offset: 3px;
  }

  .download-link:hover .icon {
    transform: translateX(3px);
  }
}

body[data-page="download"] .footnote {
  justify-content: center;
  margin-top: 40px;
  text-align: center;
}