/* ============================================================
   THE ANDROID INSTALL PAGE

   Shares the iPhone page's stylesheet for the shell -- the column, the
   mark, the headings, the boxes -- because they are the same page doing
   the same job on a different platform, and two copies of that drift.
   Only what is genuinely different lives here.

   External rather than a <style> block for the reason the whole site is:
   static files are served under a Content-Security-Policy with no
   'unsafe-inline'. Inline, the iPhone page once shipped completely
   unstyled, and nothing in the markup looked wrong because nothing in
   the markup was.
   ============================================================ */

/* The two routes in. Android, unlike iOS, has a real install API -- so
   there is a genuine choice to present here rather than one set of
   instructions, and the cards exist to make the recommended one obvious
   without hiding the other. */
.and-card {
  border: 1px solid var(--border-soft, #262B33);
  border-radius: 14px;
  padding: 18px;
  margin: 0 0 16px;
}
.and-card-primary {
  border-color: rgba(37, 99, 255, .45);
  background: rgba(37, 99, 255, .05);
}
.and-card h2 {
  font: 700 18px Inter, sans-serif;
  color: var(--text, #F1F3F6);
  margin: 8px 0 6px;
}
.and-card > p {
  margin: 0 0 14px;
  color: var(--text-faint, #8B93A0);
  font-size: 14.5px;
  line-height: 1.6;
}

.and-tag {
  display: inline-block;
  font: 800 10.5px Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent, #2563ff);
  padding: 4px 9px;
  border-radius: 999px;
}
.and-tag-quiet {
  background: transparent;
  color: var(--text-faint, #8B93A0);
  border: 1px solid var(--border-soft, #262B33);
}

/* Deliberately quieter than the Install button above it. Both work; one
   of them costs the reader a permission dialog, and the page should not
   push them towards it. */
.and-apk {
  display: block;
  text-align: center;
  padding: 15px 20px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid var(--border-soft, #262B33);
  color: var(--text, #F1F3F6);
  font: 700 15.5px Inter, sans-serif;
  text-decoration: none;
  margin: 0 0 10px;
}
.and-apk:active { transform: translateY(1px); }

.and-fineprint {
  margin: 0;
  text-align: center;
  color: var(--text-faint, #8B93A0);
  font-size: 12.5px;
  line-height: 1.6;
}

.and-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}