/* Shared by terms and privacy in every language. Colours are design's
   Styling palette, so an embedded page matches the app around it.

   ?theme=light|dark forces a theme (the app passes its own); without it the
   page follows the browser. ?embed=1 is for showing the page inside the app,
   and ?bg=none on top of it makes the page transparent. See legal.js. */

:root {
  --bg: #F4F8FB;      /* Styling.lightest */
  --fg: #0D1620;      /* Styling.darkest */
  --muted: #4A6178;
  --link: #2D5277;    /* Styling.blue */
  --surface: #DAE4ED; /* Styling.lighter */
  --rule: #C5D3E0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #142C44;      /* Styling.darker */
    --fg: #F4F8FB;
    --muted: #A9BDD0;
    --link: #9DC3E8;
    --surface: #0D1620;
    --rule: #2D5277;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #142C44;
  --fg: #F4F8FB;
  --muted: #A9BDD0;
  --link: #9DC3E8;
  --surface: #0D1620;
  --rule: #2D5277;
  color-scheme: dark;
}

body {
  margin: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans", "Noto Sans Arabic", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1rem 5rem;
}

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; line-height: 1.35; margin: 2.25rem 0 .5rem; }
p, ul { margin: 0 0 1rem; }
ul { padding-inline-start: 1.25rem; }
li { margin: .35rem 0; }
a { color: var(--link); }

.updated { color: var(--muted); font-size: .9rem; margin: 0 0 2rem; }

.contact {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-radius: 8px;
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--rule);
  font-size: .9rem;
}
.langs a { text-decoration: none; }
.langs a[aria-current] { color: var(--fg); font-weight: 600; }

/* Inside the app the app bar already says where you are, so the heading and
   language bar go, and the page continues the app's body gradient
   (Styling.backgroundGradient). In the native webviews the app also passes
   bg=none and the page turns transparent, so the real gradient shows through.
   Not on the web: a browser paints an opaque backdrop behind an iframe whose
   color-scheme differs from the host page's, so there the page paints it. */
.embed {
  --top: #F4F8FB;     /* Styling.lightest */
  --bottom: #DAE4ED;  /* Styling.lighter */
  --surface: rgba(13, 22, 32, .06);
}
.embed[data-theme="dark"] {
  --top: #142C44;     /* Styling.darker */
  --bottom: #0D1620;  /* Styling.darkest */
  --surface: rgba(244, 248, 251, .07);
}
@media (prefers-color-scheme: dark) {
  .embed:not([data-theme="light"]) {
    --top: #142C44;
    --bottom: #0D1620;
    --surface: rgba(244, 248, 251, .07);
  }
}
.embed body {
  min-height: 100vh;
  background: linear-gradient(var(--top), var(--bottom)) fixed;
}
.embed.clear, .embed.clear body { background: transparent; }
.embed .langs, .embed h1 { display: none; }
.embed main { padding: .5rem 16px 3rem; }