/* The five legal and support pages — /privacy, /terms, /health-data,
   /delete-account and /report, each in 22 languages — in the home page's look
   (Mike, 2026-10-13: docs/wave-plans/legal-pages-look.md). Each page loads
   /assets/site.css for the header, the footer and the language menus, which
   tools/build_site.py writes into it, and this file for the document: a plain
   column of text on the page's own ground, with no card, moving the way the
   home page moves (Mike, the same day: "add animation on each pages as
   well") — see Motion below.

   They are read two ways and both have to work. On a computer, by a reviewer,
   regulator or journalist who arrived at the bare address; and inside the app,
   whose viewer adds `in-app` to <html> once the page has loaded
   (webview_legal_document_view.dart). There the language menus, "Get the app"
   and most of the footer go: the reader already has the app.

   Unlike the home page they follow the device's dark setting, in the home
   page's own dark colours: the app opens them under its own header, and a
   cream page under the app's dark one would glare. */

:root {
  /* A table's heading row; the plans table's group rows are this colour. */
  --shade: #F8F2E6;
}

/* --- The document ------------------------------------------------------- */

/* The header and the footer are the home page's; only the dark logo picture
   is the legal pages' own (see the dark colours below). */
.lockup-words-dark { display: none; }

.sheet {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 72px;
  line-height: 1.65;
  /* A long word — a Russian page title, an address — breaks rather than
     pushing the page sideways on a narrow phone. */
  overflow-wrap: break-word;
}

.sheet h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 44px);
  line-height: 1.12;
  color: var(--ink);
}

.sheet h2 {
  margin: 44px 0 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 4.8vw, 27px);
  line-height: 1.25;
  color: var(--ink);
}

.sheet h3 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.sheet p,
.sheet li { margin: 0 0 14px; }

.sheet ul,
.sheet ol { margin: 0 0 18px; padding-inline-start: 22px; }

.sheet strong { font-weight: 600; color: var(--ink); }

.sheet a { text-underline-offset: 2px; }

.sheet .updated {
  margin: 10px 0 28px;
  font-size: 14px;
  color: var(--meta);
}

.sheet .form-note { margin-top: 14px; }

/* "This is a translation; the English applies", at the top of each of the
   105 translations. */
.sheet .translation-note {
  margin: 0 0 28px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 15px;
  color: var(--meta);
}

/* What the reader must not skim past: the sensitive-data notice, the
   auto-renewal terms, a deletion that cannot be undone. */
.sheet .callout {
  margin: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--crimson);
  border-radius: 10px;
  background: var(--card);
}

.sheet .callout > :last-child { margin-bottom: 0; }

.sheet code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

/* Three columns of prose do not fit a phone: the table keeps a readable
   width and scrolls inside its own box, and the page never scrolls
   sideways. */
.sheet .table-scroll {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.sheet table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.sheet th,
.sheet td {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
}

.sheet thead th {
  background: var(--shade);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.sheet tbody tr { border-top: 1px solid var(--line); }

/* The delete page's request form. */
.sheet label {
  display: block;
  margin: 18px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.sheet input,
.sheet textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  /* 16px or larger, or a phone zooms the page in when the field is tapped. */
  font-size: 16px;
  line-height: 1.4;
}

.sheet textarea { min-height: 120px; resize: vertical; }

.sheet input::placeholder,
.sheet textarea::placeholder { color: var(--meta); opacity: 1; }

.sheet input:focus,
.sheet textarea:focus {
  border-color: var(--ink);
  outline: 3px solid var(--crimson);
  outline-offset: 1px;
}

/* A <button> does not inherit the page's font as a link does. */
.sheet form .button { margin-top: 22px; font-family: inherit; }

@media (min-width: 720px) {
  .sheet { padding-left: 24px; padding-right: 24px; }
}

/* --- Header and footer ---------------------------------------------------- */

/* The footer follows the document on the same ground, so a rule parts them. */
.foot { border-top: 1px solid var(--line); }

.foot nav a[aria-current="page"] { font-weight: 600; text-decoration: none; }

/* The language menus here are <details> over a list of links, one to this
   page in each language: they work with no script at all, and choosing one
   opens another page rather than changing this one, which is why they are not
   the home page's listbox. site.css draws them through the same classes, and
   /legal/legal.js adds the rest (one open at a time, closing on a tap outside
   or Escape, remembering the pick for the home page). */
.lang-menu > summary { list-style: none; }

.lang-menu > summary::-webkit-details-marker { display: none; }

.lang-menu[open] > .lang-button { border-color: var(--ink); }

.lang-menu[open] > .lang-button .caret { transform: rotate(180deg); }

.lang-option { text-decoration: none; }

.lang-option:hover { color: var(--ink); }

.lang-option[aria-current="page"] { font-weight: 600; }

/* A tick beside the language this page is in, as on the home page. */
.lang-option[aria-current="page"]::after {
  content: "";
  flex: none;
  width: 10px;
  height: 5px;
  margin-inline-start: auto;
  border: solid var(--crimson);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translateY(-2px);
}

/* --- Inside the app ------------------------------------------------------- */

/* The app's viewer sets `in-app`. The reader has the app and its own language
   setting, so the menus, "Get the app" and the footer's notes go, and the
   footer's row of links stays: it is how one document reaches the others. */
.in-app .bar-end,
.in-app .foot .lockup,
.in-app .foot p,
.in-app .foot .lang { display: none; }

.in-app .sheet { padding-bottom: 32px; }

.in-app .foot-inner { padding-top: 20px; padding-bottom: 40px; }

.in-app .foot nav { margin-top: 0; }

/* --- Motion ------------------------------------------------------------- */

/* The home page's calm motion, and only for people who have not asked their
   device for less: the header's spoon draws itself (site.css), the title
   rises in as the page opens, the rest of the document rises into place as
   it is reached, and the footer's spoon draws again at the end (site.css,
   once legal.js marks the footer reached). What waits for a scroll waits only
   once legal.js has set `js-motion`, and legal.js leaves alone whatever is
   already on screen when it runs, so nothing that has been seen disappears. */
@media (prefers-reduced-motion: no-preference) {
  .sheet > h1:first-child,
  .sheet > h1:first-child + .updated,
  .sheet > h1:first-child + .updated + .translation-note { animation: rise 0.7s var(--ease) both; }

  .sheet > h1:first-child + .updated { animation-delay: 0.08s; }

  .sheet > h1:first-child + .updated + .translation-note { animation-delay: 0.16s; }

  /* Hidden at once, then eased in: the transition belongs to the state it
     eases into, so a block below the screen never fades out first. */
  .js-motion .sheet > .reveal { opacity: 0; transform: translateY(22px); }

  .js-motion .sheet > .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s var(--ease);
  }
}

/* --- Dark --------------------------------------------------------------- */

/* The home page's dark band (site.css's --dark, --dark-ink, --dark-body,
   --dark-meta, --dark-line and --pink). The tokens keep their names and take
   the dark colours, so the header, the footer and the menus site.css draws
   follow without a rule of their own. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cream: #1B1613;
    --card: #241E1A;
    --ink: #F4EADB;
    --body: #DCD1C3;
    --meta: #B3A491;
    --line: #3E352E;
    --crimson: #E8566E;
    --crimson-deep: #F28A9B;
    --shade: #2B241F;
  }

  .lockup-words { display: none; }

  .lockup-words-dark { display: inline; }

  .flag { box-shadow: 0 0 0 1px rgba(244, 234, 219, 0.22); }

  .lang-list { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); }

  /* White on the pink is too faint to read; the dark band's own answer is
     its dark ground. */
  .sheet .button,
  .sheet .button:hover { color: var(--dark); }
}

/* A printout is every word, whether or not it was scrolled to. */
@media print {
  .bar-end,
  .foot .lang { display: none; }

  .js-motion .sheet > .reveal { opacity: 1; transform: none; transition: none; }

  .js-motion .foot-inner .spoon-handle { stroke-dashoffset: 0; animation: none; }

  .js-motion .foot-inner .spoon-bowl { transform: none; animation: none; }
}