/* Shared by privacy.html and terms.html.

   One file for both pages rather than inline styles like index.html: the two
   pages are the same layout with different words, and two inline copies would
   drift apart the first time one of them is touched.

   The tokens below are copied from index.html's :root, not linked to it —
   index.html keeps all of its styles inline, so there is no shared sheet to
   pull them from. If the palette or the header geometry changes there, change
   it here too, or the mark will jump and the greys will shift when a visitor
   follows a footer link. */
:root {
  --bg: #000000;
  --surface: #1a1a1a;
  --border: #2e2e2e;
  --border-strong: #3a3a3a;
  --text: #ececec;
  --text-dim: #a0a0a0;
  --text-mute: #6e6e6e;
  /* Running text. The landing page only ever sets a line or two in
     --text-dim; a whole page of it reads as greyed out, and --text at this
     length glares on black. This sits between the two. */
  --text-body: #c8c8c8;
  /* Small print on these pages: the effective date, the block labels, the
     copyright. index.html sets its copyright in --text-mute, but #6e6e6e is
     about 4.1:1 on black, under the 4.5:1 that text this small needs; on a
     page people read to the end it has to pass. #8c8c8c is about 6.2:1 on
     black and stays above 4.5:1 on the violet bloom and the summary box.
     Its own token, so --text-mute keeps matching index.html. */
  --text-meta: #8c8c8c;
  /* The brand lockup's height — same derivation as index.html, so the mark is
     the same size on every page. */
  --avatar-size: 32px;
  --logo-size: calc(var(--avatar-size) * 0.9531 * 112 / 109);
  --header-pad: clamp(30px, 4.5vw, 96px);
  /* Reading column: about 75 characters of 16px text, the comfortable end of
     a line length for long prose. */
  --measure: 720px;
  /* Side gutter for the text column on a phone. */
  --gutter: 16px;
}

* { box-sizing: border-box; }

html {
  /* Dark scrollbars and form controls wherever the custom ones below don't
     apply. The site has no light theme to switch to. */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
html, body {
  margin: 0;
  /* Set explicitly: a legal page is the one people print, screenshot or open
     in reader modes, and none of that should guess the background. */
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The landing page's violet bloom, faint and only at the top: these pages
     have no fog shader behind them, and pure black under a wall of text
     looks like a page that failed to load its background. */
  background-image: radial-gradient(70% 420px at 50% 0%, rgba(134, 134, 240, 0.09), rgba(134, 134, 240, 0));
  background-repeat: no-repeat;
}

/* Same slim pill as the landing page — see index.html for why. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: var(--text-mute);
  border-width: 1px;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
}

/* ---------- Header ----------
   The landing page's header geometry exactly, so the mark sits on the same
   spot when a visitor follows a footer link here and back. It is the only
   thing in the header: the mark is the way home. */
header.top {
  display: flex;
  align-items: center;
  width: 100%;
  /* index.html's header is as tall as its sign-in pill (the avatar plus 8px)
     between the 18px paddings: 76px. This header has no pill, and without
     the floor it would be 9px shorter and the mark, centred in it, would
     sit about 4px higher than on the landing page. */
  min-height: calc(var(--avatar-size) + 8px + 18px * 2);
  padding: 18px var(--header-pad);
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  border-radius: 6px;
  transition: opacity .15s ease;
}
.brand:hover { opacity: 0.8; }
.brand:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.brand-logo {
  display: block;
  flex: none;
  height: var(--logo-size);
  width: calc(var(--logo-size) * 228 / 112);
}

/* ---------- Reading column ----------
   The prose rules below are written as :where(.legal) <element>, which
   counts as the element alone. That is what lets the component classes
   further down (.legal-meta, .legal-label, .legal-toc li, .legal-summary ul,
   .legal-parties) override them by being classes, wherever they sit in the
   file. Written as .legal p, the prose rules outranked every one of them:
   the effective date came out at body size and colour, and the contents
   list took the body's font size and spacing. */
main.legal {
  flex: 1;
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(32px, 7vh, 72px) var(--gutter) 64px;
  /* Paths like %LOCALAPPDATA%\OvaArch and long URLs have no break points of
     their own; without this a single one pushes a phone into sideways
     scroll. */
  overflow-wrap: break-word;
}

:where(.legal) h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.legal-meta {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-meta);
}

/* The short version, boxed so it reads as a summary and not as section 0.
   The violet inset is the feature cards' own bloom. */
.legal-summary {
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 -20px 80px -20px rgba(134, 134, 240, 0.12) inset;
}
.legal-summary ul { margin-top: 10px; }

/* Small tracked caps, the same treatment as the header's SIGN IN label: a
   label for the block, not a heading competing with the h2s. "In short" is
   an h2 in the markup, so the summary is reachable by heading, and only looks
   like a label: the prose h2 rule's margin, size, line height, tracking and
   colour are all set again here, and this class outranks that rule. */
.legal-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-meta);
}

.legal-toc { margin-top: 32px; }
.legal-toc ol {
  margin: 10px 0 0;
  padding-left: 1.6em;
  columns: 2;
  column-gap: 32px;
}
.legal-toc li {
  margin: 0;
  padding: 3px 0;
  break-inside: avoid;
  font-size: 15px;
  line-height: 1.5;
}
.legal-toc li::marker { color: var(--text-meta); }
/* No underline at rest: in a numbered contents list it is noise. Outranks
   the body-link rule below because that one is wrapped in :where(). */
.legal-toc a {
  color: var(--text-dim);
  text-decoration: none;
}
.legal-toc a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
}

:where(.legal) section {
  margin-top: 48px;
  /* An in-page jump lands with the heading clear of the window's edge. */
  scroll-margin-top: 24px;
}
:where(.legal) h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
:where(.legal) h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
:where(.legal) :is(p, li, dd) {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
:where(.legal) p { margin: 0 0 14px; }
:where(.legal) p:last-child { margin-bottom: 0; }
:where(.legal) ul {
  margin: 0 0 14px;
  padding-left: 1.25em;
}
:where(.legal) ul:last-child { margin-bottom: 0; }
:where(.legal) li + li { margin-top: 8px; }
:where(.legal) li::marker { color: var(--text-mute); }
:where(.legal) strong { color: var(--text); font-weight: 600; }

/* Underlined, not colour-coded: on a page of grey text a lighter grey alone
   is not enough to tell a link from emphasis. */
:where(.legal) a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color .15s ease;
}
:where(.legal) a:hover { text-decoration-color: currentColor; }
/* A link in running text gets a slightly rounded ring. The footer's pills
   get their own rule below with no border-radius, so the ring follows the
   pill's 999px instead of squaring it off. */
:where(.legal) a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 3px;
}

:where(.legal) code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  /* Windows paths are one unbroken word; let them break anywhere rather
     than run off a phone's screen. */
  overflow-wrap: anywhere;
}

/* Who gets what: a list of name/role pairs rather than a table, because a
   two-column table cannot fit a phone without a sideways scroll. */
.legal-parties { margin: 0 0 14px; }
.legal-parties > div {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.legal-parties > div:last-child { border-bottom: 1px solid var(--border); }
.legal-parties dt {
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
.legal-parties dd { margin: 4px 0 0; }

/* Text the owner must fill in before the page can be relied on. Loud on
   purpose: it must not survive a skim of the published page. */
.placeholder {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: #ffd23f;
  color: #000;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* ---------- Footer ----------
   The landing page's footer, cut down to the legal line: the same fading
   hairline on top, the same quiet pills for links. */
.legal-footer {
  position: relative;
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 24px var(--gutter) 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 13px;
  /* The copyright; the links set their own colour. */
  color: var(--text-meta);
}
.legal-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0));
}
.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  /* Pulled out by a pill's padding so the last label's text, not its hover
     surface, lands on the column edge. */
  margin-right: -10px;
}
.legal-footer nav a {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--text-dim);
  line-height: 1;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.legal-footer nav a:hover { color: var(--text); background-color: rgba(255, 255, 255, 0.05); }
/* Colour alone is a 2.2:1 cue against the sibling links; the weight is the
   second cue WCAG 1.4.1 asks for. */
.legal-footer nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.legal-footer nav a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Stacked from 600px down. In one row the copyright and the five links need
   about 582px of window (measured in Chromium with the Linux fallback font;
   other system fonts differ by a few pixels, hence the margin). Short of
   that, the row wraps by itself: the links drop under the copyright, but
   without the stacked layout's pull to the left their labels sit a pill's
   padding in from its edge. The old 560px left that band open. */
@media (max-width: 600px) {
  .legal-footer { flex-direction: column; align-items: flex-start; }
  .legal-footer nav { margin: 0 0 0 -10px; }
}

/* Printed or saved as PDF, the page should be plain black on white and lose
   the chrome that only works on screen. */
@media print {
  html, body { background: #fff; color: #000; }
  body { background-image: none; }
  header.top, .legal-toc, .legal-footer nav { display: none; }
  .legal h1, .legal h2, .legal h3, .legal p, .legal li, .legal dd,
  .legal dt, .legal strong, .legal a, .legal code, .legal-meta, .legal-label { color: #000; }
  .legal-summary { box-shadow: none; background: none; border-color: #999; }
  .legal code { background: none; border-color: #999; }
  .legal-footer { color: #000; }
  .legal-footer::before { background: #999; }
  /* The screen underline is a translucent white: on paper it would vanish. */
  .legal a { text-decoration-color: currentColor; }
}