/* The bits of /install that /privacy and /terms have no use for.

   legal.css comes first and does the heavy lifting — the paper, the ink, the
   heading, the footer — so this file is only the chooser, the two halves and
   the download button. Same reason those two share one stylesheet rather than
   keeping two copies: there is one look, and it lives in one place.

   No web font here either. Pairstead asks Google for Fraunces and Inter; a page
   somebody may be reading on a phone with one bar should not wait on it. */

/* The line the script writes once it knows what you are holding. */
.you{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-left:4px solid var(--teal);
  border-radius:14px;
  padding:12px 18px;
  margin:0 0 22px;
  font-size:.95rem;
  color:var(--ink-soft);
}

/* ------------------------------------------------------------ the chooser */

/* The page is long, because it is honest about Android's warning and Apple's
   refusal. Without these two an iPhone reader meets a screen and a half of
   Android first and concludes there is nothing here for them. */
.picks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 34px;
}

.pick{
  display:block;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--ink);
}
.pick:hover{
  border-color:var(--terracotta);
  color:var(--ink);
}

.pick__name{
  display:block;
  font-family:var(--font-display);
  font-size:1.1rem; font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:3px;
}
.pick__what{
  display:block;
  font-size:.85rem;
  color:var(--ink-faint);
  line-height:1.4;
}

/* ---------------------------------------------------------- the two halves */

/* Both are always in the file; the script only moves whichever one is yours to
   the top. Flex order rather than moving the nodes, so nothing is rebuilt and
   the anchors in the chooser still land where they should. */
.ways{ display:flex; flex-direction:column; }
.way[data-first]{ order:-1; }

/* h2 in legal.css draws a rule above itself, which is right for a document and
   wrong for the first thing after a chooser. */
.way h2{ margin-top:36px; }

.steps{
  counter-reset:step;
  list-style:none;
  margin:0 0 18px;
  padding:0;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding-left:38px;
  margin-bottom:11px;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:1px;
  width:25px; height:25px;
  border-radius:50%;
  background:#F6DCC5;              /* the ember tint from Bond.html */
  color:var(--terracotta-deep);
  font-size:.82rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

.way__note{
  font-size:.92rem;
  color:var(--ink-soft);
}

/* ------------------------------------------------- the two iPhone drawings */

/* Side by side where there is room, stacked on the phone that is actually
   being talked about — where they are read one after the other anyway,
   because they are two steps in an order. */
.draws{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0 0 18px;
}

.draw{
  margin:0;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:16px;
  padding:14px 14px 4px;
}

.draw svg{ display:block; width:100%; height:auto; }

.draw figcaption{
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.45;
  margin:6px 2px 12px;
}

/* Android's warning, said plainly rather than talked past. */
.way__warn{
  background:var(--paper);
  border:1.5px dashed var(--line);
  border-radius:14px;
  padding:16px 20px;
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0 0 15px;
}

/* --------------------------------------------------------- the file itself */

.grab{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 22px;
}

.button{
  display:inline-block;
  background:var(--terracotta);
  color:var(--paper);
  text-decoration:none;
  font-size:1rem; font-weight:600;
  padding:13px 26px;
  border-radius:12px;
  border:1.5px solid var(--terracotta-deep);
}
.button:hover{ background:var(--terracotta-deep); color:var(--paper); }

/* What the button becomes when the file is genuinely not there — see the
   content-type check in install.js. Saying so is better than handing somebody
   a download that is really a web page wearing an app's name. */
.button[data-missing]{
  background:var(--paper);
  color:var(--ink-faint);
  border-color:var(--line);
  border-style:dashed;
  cursor:default;
}

.grab__meta{
  font-size:.85rem;
  color:var(--ink-faint);
}

@media (max-width:520px){
  .picks{ grid-template-columns:1fr; }
  .draws{ grid-template-columns:1fr; }
  .grab{ gap:10px; }
  .button{ width:100%; text-align:center; }
}