/* ===========================================================================
   /install — the page that puts the app on a phone.

   Two ways are on this page at once, because the page is also the thing you
   send to somebody else, and you do not know what they are holding. The script
   only moves the likely one to the top; nothing is ever hidden, so a person
   with JavaScript off, or on a phone the sniffing does not recognise, still
   reads both.
   =========================================================================== */

/* "Looks like you are on an iPhone." Written by the script, so it starts
   hidden and stays hidden when there is nothing true to say. */
.you {
  color: var(--faint);
  font-size: 13.5px;
  margin: -22px 0 40px;
}
.you strong { color: var(--dust); font-weight: 600; }

/* The two ways, named and side by side, above the fold. The page is long
   because it is honest about Android's warning and Apple's refusal, and without
   this a person on an iPhone reads a screen and a half about Android first. */
.picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 44px;
}

.pick {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--panel);
  /* .page a underlines every link here, and these are cards. */
  text-decoration: none;
}
.pick:hover { border-color: var(--haze); text-decoration: none; }

.pick__name {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  color: var(--starlight);
  margin-bottom: 3px;
}

.pick__what {
  display: block;
  color: var(--faint);
  font-size: 13.5px;
}

.ways { display: flex; flex-direction: column; }

/* The one that matches the phone is pulled to the top by the script. Without
   it the source order stands, which is Android first. */
.way[data-first] { order: -1; }

.way__note {
  color: var(--faint);
  font-size: 14px;
}

/* Said plainly rather than in a yellow box: the Android warning frightens
   people, and the honest answer is a paragraph, not a colour. */
.way__warn {
  border-left: 2px solid var(--haze);
  padding: 2px 0 2px 16px;
  margin: 20px 0 0;
  color: var(--faint);
  font-size: 14px;
}

.steps {
  color: var(--dust);
  margin: 0 0 15px;
  padding-left: 20px;
}
.steps li { margin-bottom: 9px; }

/* The download, given room. It is the one thing on the page somebody came to
   press. */
.grab {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 24px;
}

.page a.button {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--r-md);
  background: var(--dawn);
  color: var(--void);
  font-weight: 600;
  font-size: 15px;
  /* .page a underlines every link on these pages, and at (0,1,1) it outranks a
     bare .button — hence the element in the selector above. */
  text-decoration: none;
  box-shadow: var(--lift);
}
.page a.button:hover { filter: brightness(1.12); text-decoration: none; }

.grab__meta {
  color: var(--faint);
  font-size: 13px;
}

/* When the file is not built yet, the script says so here rather than leaving
   a button that downloads a 404 page named like an app. */
.page a.button[data-missing] {
  background: var(--raised);
  color: var(--faint);
  box-shadow: none;
  pointer-events: none;
}

@media (max-width: 560px) {
  .picks { grid-template-columns: 1fr; }
  .grab { gap: 12px; }
  .page a.button { width: 100%; text-align: center; }
}