/* Document pages (privacy / terms / delete-account).
   One template: #topbar -> #content -> #footer, desktop (1440) is the base,
   mobile (390) lives in the `max-width: 767px` block at the bottom of each part.

   Pencil exports these frames with `box-sizing: content-box`, a height that is the
   frame height minus half a stroke and a negative margin of the same half pixel —
   that is Pencil centring a 1px stroke on the frame edge. In CSS the border is drawn
   inside the box, so every stroked part takes its pixel out of the padding on the
   stroked side: the content keeps the offset the design shows and the part keeps its
   whole-pixel height.

   Heights are never hard-coded: they fall out of padding + gap + line boxes. Where
   Pencil and Chrome disagree on `line-height: normal` (see CONVENTIONS.md) the value
   is written out in px so the stack adds up to the design. */

/* Same full-bleed gutter as the landing sections: the part spans the viewport and its
   side padding is whatever is left beside the 1140px content column — 150px at 1440,
   growing on wider screens, with a 24px floor once the column no longer fits. */
.doc-topbar,
.doc-content,
.doc-footer {
  --gutter: max(var(--gutter-mobile), calc((100% - var(--content-max)) / 2));
  width: 100%;
  flex-shrink: 0;
}

/* ===== TOPBAR ===== */

/* 78px frame = 22px + 34px logo mark + 22px, with the 1px stroke straddling the
   bottom edge exactly as Pencil draws it: the inner half inside the padding box,
   the outer half below it. Both halves are shadows, so they cost no layout and the
   22px offset of the content is the design's own.

   A CSS `border-bottom: 1px` inside the box also yields 78px, and per-section
   diff.mjs even scores it *better* — but that reading is an artefact. bestOffset()
   searches shifts of the reference and keeps the minimum: with the border inside,
   the stroke row is off by one device row, so the search escapes that 780px penalty
   by shifting the reference by one row — which moves it against ALL the other
   content too. The two numbers are then measured at different alignments and are
   not comparable. The tell is a red ring around the 34px logo mark in the diff
   image: a hard-edged circle cannot antialias across a whole device row.

   The reference settles it: the mark's ink in the export sits at y 22.0-56.0,
   i.e. exactly this padding-top. Whole-page diff-full.mjs does no offset search at
   all, and there straddling wins on all 12 document pages (terms-ru-d 14804 ->
   9083 mismatching pixels, i.e. -2x2880 — precisely the two stroke rows). */
.doc-topbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 22px var(--gutter);
  box-shadow: inset 0 -0.5px 0 var(--dark-border), 0 0.5px 0 var(--dark-border);
  background-color: var(--dark-bg);
}

.doc-topbar__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  flex-shrink: 0;
}

.doc-topbar__mark {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  object-fit: cover;
  flex-shrink: 0;
}

.doc-topbar__wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  /* Pencil: normal = round(1.3 x 21) = 27. */
  line-height: 27px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.doc-topbar__back {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 0;
  color: var(--dark-text-secondary);
}

.doc-topbar__back-icon {
  width: 18px;
  height: 18px;
}

.doc-topbar__back-text {
  font-family: var(--font-body);
  font-size: 15px;
  /* Pencil: normal = round(1.21 x 15) = 18. */
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ===== CONTENT ===== */

.doc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 72px var(--gutter) 90px;
}

.doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  width: 820px;
  max-width: 100%;
  flex-shrink: 0;
}

.doc__head,
.doc__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}

.doc__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: 44px;
  /* Pencil: normal = round(1.3 x 44) = 57. */
  line-height: 57px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dark-text-primary);
}

.doc__updated {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  /* Pencil: normal = round(1.21 x 13) = 16. */
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-text-muted);
  white-space: nowrap;
}

.doc__h {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: 22px;
  /* Pencil: normal = round(1.3 x 22) = 29. */
  line-height: 29px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dark-text-primary);
}

.doc__p {
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
}

/* ===== FOOTER ===== */

/* 119px frame = 36px + 17px links + 14px gap + 16px copy + 36px, stroke straddling.
   The mobile footer is a different composition, not a squeezed desktop one: it drops
   the link row entirely and shows the logo mark instead. Same DOM, `display: none`. */
.doc-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 36px var(--gutter);
  /* Pencil centres the stroke on the frame edge: half of it hangs above the
     footer. A CSS border sits fully inside and would put our whole content half
     a pixel above the export. Two shadows reproduce the design instead — the
     inner half inside the padding box, the outer half above it — and since a
     shadow costs no layout, the 36px offset of the content is the design's. */
  box-shadow: inset 0 0.5px 0 var(--dark-border), 0 -0.5px 0 var(--dark-border);
  background-color: var(--dark-bg);
}

.doc-footer__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  flex-shrink: 0;
}

.doc-footer__link,
.doc-footer__dot {
  font-family: var(--font-body);
  font-size: 14px;
  /* Pencil: normal = round(1.21 x 14) = 17. */
  line-height: 17px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.doc-footer__link {
  color: var(--dark-text-secondary);
}

.doc-footer__link--accent {
  color: var(--dark-accent);
}

.doc-footer__dot {
  color: var(--dark-text-muted);
}

.doc-footer__mark {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.doc-footer__copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  /* Pencil: normal = round(1.21 x 13) = 16. */
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-text-muted);
  white-space: nowrap;
}

/* ===== PENCIL TEXT-FRAME ROUNDING =====

   Pencil sizes every text frame to its ink width rounded UP to a whole pixel;
   Chrome lays the run out at its exact fractional width. Measured on the desktop
   footer link row: Chrome makes it 530.22px (216.14 + 4.05 + 56.13 + 4.05 +
   145.86 + 4x26), Pencil 534 — the same five runs with each one ceil'd. round()
   would give 530 and no rounding 530.219; only ceil reproduces the export.

   A left-aligned run is unaffected: its box grows to the right and the glyphs
   still start at the box's left edge. Where the box is pinned by its right or
   centre edge — "На главную" sits flush against the top bar's gutter, both
   footer rows are centred — Pencil's glyphs land left of ours by exactly the
   fraction it added. Giving the run `padding-right: ceil(w) - w` makes the CSS
   box precisely ceil(w) wide, so the edges coincide with Pencil identically.

   The slack is a property of the STRING, not a constant: it runs from 0.016px
   ("Back to home") to 0.953px ("·"). Values below are measured with
   Range.getBoundingClientRect() on the live pages; every one is an exact
   multiple of 1/64. The top bar and footer carry the same copy on all six
   document pages, so the values depend only on the language — but they are tied
   to these strings and MUST be re-measured when the placeholder body copy is
   replaced with the real legal text, or if these labels ever change. */

/* "На главную" 85.3125 / "Back to home" 96.984375 */
html[lang='ru'] .doc-topbar__back-text {
  padding-right: 0.6875px;
}

html[lang='en'] .doc-topbar__back-text {
  padding-right: 0.015625px;
}

/* "·" 4.046875 — same run in both languages */
.doc-footer__dot {
  padding-right: 0.953125px;
}

/* L1: "Политика конфиденциальности" 216.140625 / "Privacy Policy" 92.578125 */
html[lang='ru'] .doc-footer__links > :nth-child(1) {
  padding-right: 0.859375px;
}

html[lang='en'] .doc-footer__links > :nth-child(1) {
  padding-right: 0.421875px;
}

/* L2: "Условия" 56.125 / "Terms" 41.25 */
html[lang='ru'] .doc-footer__links > :nth-child(3) {
  padding-right: 0.875px;
}

html[lang='en'] .doc-footer__links > :nth-child(3) {
  padding-right: 0.75px;
}

/* L3: "support@myrelax.app" 145.859375 — same run in both languages */
.doc-footer__links > :nth-child(5) {
  padding-right: 0.140625px;
}

/* Copy at 13px: RU 254.8125 / EN 230.3125 */
html[lang='ru'] .doc-footer__copy {
  padding-right: 0.1875px;
}

html[lang='en'] .doc-footer__copy {
  padding-right: 0.6875px;
}

/* ===== MOBILE (390) ===== */

@media (max-width: 767px) {
  /* 66px frame = 16px + 34px logo mark + 16px, stroke straddling the bottom edge. */
  .doc-topbar {
    padding: 16px var(--gutter);
  }

  .doc-content {
    align-items: flex-start;
    padding: 40px var(--gutter) 48px;
  }

  .doc {
    gap: 22px;
    width: 100%;
  }

  .doc__head,
  .doc__section {
    gap: 8px;
  }

  .doc__title {
    font-size: 30px;
    line-height: 35px;
  }

  .doc__h {
    font-size: 19px;
    /* Pencil: normal = round(1.3 x 19) = 25. */
    line-height: 25px;
  }

  .doc__p {
    font-size: 15.5px;
    line-height: 25px;
  }

  /* 109px frame = 28px + 28px mark + 10px gap + 15px copy + 28px, stroke straddling. */
  .doc-footer {
    gap: 10px;
    padding: 28px var(--gutter);
  }

  .doc-footer__links {
    display: none;
  }

  .doc-footer__mark {
    display: block;
  }

  .doc-footer__copy {
    font-size: 12px;
    /* Pencil: normal = round(1.21 x 12) = 15. */
    line-height: 15px;
  }

  /* Copy at 12px: RU 235.21875 / EN 212.609375 */
  html[lang='ru'] .doc-footer__copy {
    padding-right: 0.78125px;
  }

  html[lang='en'] .doc-footer__copy {
    padding-right: 0.390625px;
  }
}

/* --- real-content support (added: elements the source lorem never used) --- */
/* The source sections were hand-authored <h2 class="doc__h"> + <p class="doc__p">.
   Our real body is rendered markdown inside `.doc__body`, so mirror that doc
   typography for the tags Markdown emits, using only tokens.css variables. */

.doc__body {
  width: 100%;
}

.doc__body p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
}

.doc__body h2 {
  margin: 30px 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  /* Pencil: normal = round(1.3 x 22) = 29. */
  line-height: 29px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dark-text-primary);
}

.doc__body h3 {
  margin: 28px 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dark-text-primary);
}

.doc__body ul {
  margin: 0 0 14px;
  padding-left: 22px;
  list-style: disc;
}

.doc__body li {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
}

.doc__body strong {
  font-weight: 600;
  color: var(--dark-text-primary);
}

.doc__body em {
  font-style: italic;
}

.doc__body a {
  color: var(--dark-accent);
  text-decoration: underline;
}

.doc__body hr {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--dark-border);
}

/* First heading/paragraph shouldn't push extra space below the doc head. */
.doc__body > :first-child {
  margin-top: 0;
}