/* ============================================================
   The two pages Google Play requires: the privacy policy and
   the account deletion page. They take the whole of home.css
   -- bar, drawer, page head, bands, reveals, footer -- and add
   the one thing no other page needs, which is long-form prose.

   These are read, not browsed. They stay narrow, plain, and
   quiet: someone here is checking what happens to their data,
   and every bit of decoration between them and the answer is
   in the way.
   ============================================================ */

.prose { max-width: 66ch; }
.prose h2 {
  margin: var(--sc-8) 0 var(--sc-4);
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); line-height: 1.15;
  letter-spacing: var(--sc-track-tight); color: var(--sc-ink);
}
.prose h2:first-child { margin-top: 0; }
/* The policy became two policies under one roof, so h2 now names a part --
   the app, the website, both -- and the questions inside it stepped down to
   h3. Bigger than an h3 usually is: it is carrying the weight the rule
   above it used to, and a reader skimming for "the website" has to be able
   to find it without reading. */
.prose h2 {
  padding-top: var(--sc-2);
  font-size: var(--sc-t-xl);
  color: var(--sc-ink);
}
.prose h3 {
  margin: var(--sc-7) 0 var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-base); line-height: 1.25;
  letter-spacing: var(--sc-track-tight); color: var(--sc-ink);
}
/* The line between the parts. Not a border on the heading -- this has to
   read as the end of one policy, with air on both sides of it. */
.prose hr {
  height: 0; margin: var(--sc-9) 0 var(--sc-8);
  border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.prose p, .prose li {
  margin: 0 0 var(--sc-4);
  font-size: var(--sc-t-base); line-height: 1.75; color: var(--sc-ink-soft);
}
.prose b, .prose strong { color: var(--sc-ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 var(--sc-4); padding-left: 1.3rem; }
.prose li { margin-bottom: var(--sc-3); }
.prose li::marker { color: var(--sc-accent); }
.prose a { color: var(--sc-accent); text-decoration: underline; }
.prose a:hover { color: var(--sc-ink); }

/* The date the policy last changed. Small, but it is the first thing
   anybody auditing the page looks for. */
.prose__when {
  margin: 0 0 var(--sc-7);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
}

/* ------------------------------------------------ delete --
   The live control. It is set apart from the prose around it
   because pressing it is irreversible, and because the page
   also explains how to do the same thing in the app -- the
   two must not read as one continuous set of instructions. */
.erase {
  margin: var(--sc-7) 0;
  padding: var(--sc-6);
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
}
.erase h2 { margin-top: 0; }
.erase .btn { margin-top: var(--sc-5); cursor: pointer; }
.erase .hidden { display: none; }

/* Destructive, and dressed as it. Not the site accent: the accent means
   "this is the way on", and this is the opposite of that. */
.btn-danger {
  background: #E5484D; color: #fff;
  box-shadow: 0 8px 26px rgba(229, 72, 77, 0.28);
}
.btn-danger:hover { background: #F2555A; box-shadow: 0 8px 26px rgba(229, 72, 77, 0.4); }

.erase .signed-in {
  margin: var(--sc-5) 0 0;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.erase .signed-in strong { color: var(--sc-ink); }

#status { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); min-height: 1.4em; }
#status.err { color: #FF9A9E; }
#status.ok  { color: var(--sc-accent); }

/* A page head with no photograph behind it. Somebody reading a privacy
   policy is checking what happens to their data; a panorama drifting
   under the answer is the studio talking over them. */
.pagehead--plain { padding-bottom: var(--sc-6); }
.pagehead--plain .pagehead__title { max-width: 24ch; }