/* VitaSight's site. Colors are the app's Nocturne tokens (src/theme/tokens.ts in the app's
   repository), light first, then dark; the mark, the lockups and the horizon follow its
   design/brand/. The app sets no font family, so neither does the site, and weights stay at 400
   and 500, as in the app. */

:root {
  color-scheme: light dark;
  --bg: #eef0fa;
  --surface: #fbfbff;
  --text: #23252e;
  --dim: #595d6c;
  --faint: #75798c;
  --accent: #796cbf;
  --accent-text: #5d5294;
  --accent-soft: rgba(121, 108, 191, 0.11);
  --rule: rgba(121, 108, 191, 0.24);
  --band: rgba(121, 108, 191, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161826;
    --surface: #232532;
    --text: #e9e9ed;
    --dim: #9397ab;
    --faint: #75798c;
    --accent: #9184d9;
    --accent-text: #b5abfc;
    --accent-soft: rgba(145, 132, 217, 0.15);
    --rule: rgba(145, 132, 217, 0.3);
    --band: rgba(145, 132, 217, 0.3);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

a { color: var(--accent-text); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-weight: 500; line-height: 1.25; }
strong { font-weight: 500; }

main, .bar, footer {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* The bar over every page but the home page: the glyph lockup, for documents */
.bar { padding-top: 28px; padding-bottom: 8px; }
.bar a { display: inline-block; }
.bar img { display: block; height: 24px; width: auto; }

footer {
  margin-top: 72px;
  padding-top: 20px;
  padding-bottom: 48px;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 14px;
}
footer nav a { display: inline-block; color: var(--dim); margin: 0 18px 8px 0; }
footer p { margin: 0; }

/* The horizon: the band edge to edge, the line coming in high, dipping below the range and
   settling back into it, and the ringed point. The band is this box's background, placed where
   the drawing's band would be (y 404 to 508 of its 300 to 580), so it runs past the drawing on
   a wide screen; the line runs off the left edge for the same reason. */
.horizon {
  overflow: hidden;
  background: linear-gradient(transparent 37.143%, var(--band) 37.143%, var(--band) 74.286%,
    transparent 74.286%);
}
.horizon svg { display: block; width: 100%; max-width: 1400px; height: auto; margin: 0 auto; overflow: visible; }
.horizon .line { fill: none; stroke: var(--accent-text); stroke-width: 10; stroke-linecap: round; }
.horizon .point { fill: var(--accent-text); }

/* The home page */
.hero { text-align: center; padding: 72px 20px 32px; }
.hero h1 { margin: 0; }
.hero img { display: block; height: 200px; width: auto; margin: 0 auto; }
.slogan {
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 44px 0 10px;
}
.slogan-zh { font-size: clamp(20px, 3.8vw, 27px); line-height: 1.3; font-weight: 500; color: var(--accent-text); margin: 0; }

.lede { font-size: 20px; line-height: 1.5; text-align: center; max-width: 600px; margin: 48px auto 36px; }

.points { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.points li { background: var(--surface); border-radius: 14px; padding: 20px 22px; }
.points h2 { font-size: 18px; margin: 0 0 6px; }
.points p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.5; }
@media (max-width: 600px) { .points { grid-template-columns: 1fr; } }

.aside { color: var(--dim); text-align: center; max-width: 600px; margin: 0 auto 12px; }

/* The 404 page */
.lost { text-align: center; padding-top: 72px; padding-bottom: 48px; }
.lost h1 { font-size: clamp(30px, 6.4vw, 46px); letter-spacing: -0.02em; margin: 0 0 10px; }
.lost p { color: var(--dim); margin: 0 0 28px; }

.button {
  display: inline-block;
  padding: 10px 24px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-text);
  font-weight: 500;
  text-decoration: none;
}
.button:hover { background: var(--accent-soft); }

/* Documents: the policies, the terms and support */
.doc h1 { font-size: 34px; letter-spacing: -0.01em; margin: 40px 0 4px; }
.doc h2 { font-size: 22px; margin: 44px 0 8px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc h3 { font-size: 18px; margin: 28px 0 4px; }
.doc p, .doc ul, .doc ol, .doc table { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }

.meta { color: var(--dim); font-size: 15px; margin-bottom: 28px; }

.toc { font-size: 15px; columns: 2; column-gap: 32px; padding-left: 20px; }
@media (max-width: 600px) { .toc { columns: 1; } }

table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 500; color: var(--dim); }

.caps { text-transform: uppercase; font-size: 15px; letter-spacing: 0.01em; }


/* After `.bar img` and `.hero img`, which have the same specificity, so these win by coming later. */
img.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  img.only-light { display: none; }
  img.only-dark { display: block; }
}