/* ==========================================================================
   app-wizard.io — doc.css
   Stylesheet for legal / document pages on the studio vhost.

   The studio landing (index.html) carries its own inline <style>, because it is
   one page and has no siblings. Document pages do have siblings — one per app,
   times two languages — so they share this file instead.

   Tokens are lifted verbatim from the landing's inline block so the two are
   visibly the same site. Unlike the landing, which is committed dark, these
   pages follow the reader's colour scheme: a privacy policy is something people
   actually read, print and archive, and Play reviewers open it in whatever
   their machine is set to.
   ========================================================================== */

:root {
  /* Brand palette — immutable, identical to the landing. */
  --ink-900: #070F12;
  --ink-800: #0C171B;
  --ink-700: #132227;
  --ink-600: #1C3037;
  --teal-700: #0E5F5E;
  --teal-500: #0E7C7B;
  --teal-300: #14A8A6;
  --cyan-400: #22D3D8;
  --lime-400: #A6E528;
  --amber-400: #FFC93C;

  /* Semantic — dark by default. Overridden wholesale in the light block. */
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --card: var(--ink-700);
  --line: var(--ink-600);
  --text: #E8EFF0;          /* 16.6:1 on --bg */
  --text-dim: #9AAFB4;      /*  8.4:1 on --bg */
  --accent-fg: var(--lime-400);
  --link: var(--cyan-400);
  --link-hover: var(--lime-400);
  --focus: var(--cyan-400);
  --header-bg: rgba(7, 15, 18, 0.82);
  --tint: rgba(255, 255, 255, 0.035);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1rem, 0.965rem + 0.18vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
  --step-2:  clamp(1.3125rem, 1.2rem + 0.58vw, 1.5rem);
  --step-4:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);

  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 68ch;
  --header-h: 3.75rem;
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;
}

/* The reader's scheme wins on document pages. Every colour below is a token,
   so this one block is the entire light theme. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --surface: #F4F7F7;
    --card: #FFFFFF;
    --line: #D7E0E1;
    --text: #101A1D;        /* 17.5:1 on white */
    --text-dim: #4A5C61;    /*  7.6:1 on white */
    /* Lime on white is ~1.6:1 and unreadable, so the accent becomes deep teal. */
    --accent-fg: #0B5F5E;   /*  6.9:1 on white */
    --link: #0B5F5E;
    --link-hover: #093F3F;
    --focus: #0B5F5E;
    --header-bg: rgba(255, 255, 255, 0.88);
    --tint: rgba(0, 0, 0, 0.025);
  }
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  /* A stray wide child can never scroll the page sideways. `clip`, not
     `hidden`, so the sticky header keeps working. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: from-font; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

:target { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--lime-400);
  color: var(--ink-900);
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: var(--ink-900); }

/* --------------------------------------------------------------- chrome */

.wrap {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand-mark { width: 32px; height: 32px; flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--tint);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { border-color: var(--teal-300); color: var(--text); }

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

.doc-head {
  padding-block: clamp(2rem, 5vw, 3.25rem) 0;
}

.doc-head .lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.doc-head h1 {
  margin: 0 0 0.5rem;
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  /* Long single words — «конфиденциальности» — must not be clipped at 360px. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.doc-meta {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.doc {
  max-width: var(--measure);
  padding-block: 1.5rem clamp(3rem, 7vw, 5rem);
}

.doc h2 {
  margin: 3rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.doc h3 {
  margin: 2rem 0 0.5rem;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
}

.doc p { margin: 0 0 1rem; text-wrap: pretty; }
.doc ul, .doc ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.doc li { margin-bottom: 0.5rem; }
.doc strong { font-weight: 700; color: var(--text); }
.doc em { font-style: italic; }

.doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--tint);
  border: 1px solid var(--line);
}

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.table-wrap:focus-visible { outline-offset: 0; }

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: var(--step--1);
}
.doc th, .doc td {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.doc th { background: var(--surface); font-weight: 700; }
.doc tbody tr:last-child th,
.doc tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 2rem 2.5rem;
  color: var(--text-dim);
  font-size: var(--step--1);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.footer-bottom { margin: 0; }

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- print
   Play reviewers sometimes archive a policy as PDF. Drop the chrome and
   print black on white regardless of the reader's scheme. */

@media print {
  .site-header, .site-footer, .skip-link, .doc-nav { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .doc, .doc-head { max-width: none; padding: 0; }
  .doc h2 { border-top-color: #999; }
  .doc a { color: #000; text-decoration: underline; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .table-wrap { overflow: visible; border-color: #999; }
  .doc th, .doc td { border-bottom-color: #999; }
  .doc th { background: #eee !important; }
}