/* Legal documents — one sheet for three pages built from includes/document-page.php:
 *   Terms & Conditions   [1:2002] / [74:1412]
 *   Privacy Policy       [1:2785] / [74:1814]
 *   Cookie Policy        [1:3117] / [74:2173]
 *
 * The mockup draws the same article-container on all three: a 360px index and a
 * 760px column of sections, 48px apart, hairline above every section. The three
 * frames differ only in the hero rhythm, the body size and whether the section
 * headings are set in caps — those live in the --terms / --privacy / --cookie
 * modifiers below and nowhere else.
 *
 * Two colours the mockup uses here have no token — the index label, #475569 on
 * desktop and #64748b on the mobile terms frame. They are written out where they
 * are used and nowhere else.
 */
/* ── hero [1:2031] / [50:394] / [56:9] ────────────────────────────────── */
.doc-hero {
  background: var(--color-bg);
  padding-block: 72px 64px;
}
.doc-hero--terms { padding-bottom: 72px; }
/* [56:9] is a 320px band with 210px of copy centred in it — the frame's own
   72/64 padding belongs to a taller box than the reference render draws. */
.doc-hero--cookie { padding-block: 55px; }

.doc-hero__title {
  display: flex; flex-direction: column; gap: var(--space-16);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 64.8px;
  color: var(--color-ink);
}
/* Privacy stacks its two lines tighter and on the full 72px leading [50:396]. */
.doc-hero--privacy .doc-hero__title { gap: var(--space-12); line-height: 72px; }

.doc-hero__rule {
  height: 1px; border: 0; background: var(--color-border); opacity: .6;
  margin-block: var(--space-12);
}

.doc-hero__intro {
  margin-top: var(--space-16);
  font-size: var(--fs-body-sm); line-height: 24px;
  color: var(--color-muted);
}
.doc-hero__rule + .doc-hero__intro { margin-top: var(--space-12); }   /* privacy keeps the 12px column */

/* Дата вступления в силу — служебная строка под вступлением: набрана мельче
   текста, капителью, чтобы читалась как реквизит документа, а не как абзац. */
.doc-hero__date {
  margin-top: var(--space-16);
  font-size: var(--fs-2xs); line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-faint);
}
.doc-hero__date time { color: var(--color-muted); font-weight: 700; }

/* ── article container [1:2035] / [1:2822] / [56:15] ──────────────────── */
.doc-layout { background: var(--color-bg); padding-bottom: 80px; }
.doc-layout--terms { background: var(--color-surface); }

/* 360 + 48 + 760 = 1168 of the 1280 column; the mockup leaves the rest empty. */
.doc-layout__inner {
  display: grid;
  grid-template-columns: 360px minmax(0, 760px);
  gap: 48px;
  align-items: start;
}

/* ── on this page [1:2036] ────────────────────────────────────────────── */
.doc-toc {
  position: sticky; top: 140px;                 /* clears the sticky 36+88 header */
  display: flex; flex-direction: column; gap: var(--space-24);
  padding-block: 60px;
}
.doc-toc__heading {
  font-size: var(--fs-xs); font-weight: 700; line-height: 16px;
  letter-spacing: 1px; text-transform: uppercase;
  color: #475569;                                /* slate the tokens do not carry */
}
/* Cookie sets the same label a step smaller, wider and without the caps flag. */
.doc-layout--cookie .doc-toc__heading {
  font-size: var(--fs-2xs); line-height: 15px;
  letter-spacing: var(--ls-wide); text-transform: none;
}
.doc-toc__list { display: flex; flex-direction: column; gap: var(--space-10); }
.doc-toc__link {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-12);
  text-decoration: none;
}
.doc-toc__link::after {                          /* tap target, not padding */
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px;
}
.doc-toc__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); line-height: 17px;
  color: var(--color-brand);
}
.doc-toc__name {
  flex: 1; min-width: 0;
  font-size: var(--fs-base); font-weight: 700; line-height: 19px;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease);
}
.doc-layout--terms .doc-toc__name { font-size: var(--fs-sm); line-height: 18px; }
.doc-toc__link:hover .doc-toc__name,
.doc-toc__link.is-current .doc-toc__name { color: var(--color-brand); }

/* ── sections [1:2114] ────────────────────────────────────────────────── */
/* document-content is a column of gap 64 alternating hairline and section, and
   that is exactly what is built: the rule is its own element, so a section box
   measures the section and nothing else. */
.doc-article { display: flex; flex-direction: column; gap: 64px; }
.doc-rule { height: 1px; border: 0; background: var(--color-border); }

.doc-section__heading {
  scroll-margin-top: 140px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: 34px; letter-spacing: -0.5px;
  color: var(--color-ink);
}
/* "01 " / "01. " — inline on desktop, its own brand-blue line on mobile. */
.doc-section__heading::before { content: attr(data-no) " "; white-space: pre; }

/* Paragraph runs sit 12px apart; groups and other blocks 20px. */
.doc-section > * + * { margin-top: var(--space-20); }
.doc-group { display: flex; flex-direction: column; gap: var(--space-12); }

.doc-p { font-size: var(--fs-body); line-height: 26px; color: var(--color-muted); }
/* Terms runs a step smaller and darker [1:2118]. */
.doc-layout--terms .doc-p { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-text); }
.doc-p--strong { font-weight: 700; }

.doc-list { display: flex; flex-direction: column; gap: var(--space-12); }
.doc-list__item {
  display: flex; gap: var(--space-10);
  font-size: var(--fs-body); line-height: 26px; color: var(--color-muted);
}
.doc-list__bullet {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-body); line-height: 19px;
  color: var(--color-brand);
}
.doc-list__text { flex: 1; min-width: 0; }

/* Cookie categories [56:27] — an indented block of subheading, copy, examples. */
.doc-sub {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding-inline: var(--space-16);
}
.doc-h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; line-height: 20px;
  color: var(--color-ink);
}
.doc-note { font-size: var(--fs-base); font-weight: 700; line-height: 19px; color: var(--color-muted); }

.doc-links { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.doc-links > li { display: flex; }   /* a block li would add its own 24px line box */
.doc-links .arrow-link { font-size: var(--fs-body-sm); line-height: 20px; text-decoration: underline; }

/* ── tablet: no frame in the mockup, derived from the two column widths ── */
@media (max-width: 1199px) {
  .doc-layout__inner { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-32); }
  .doc-toc { padding-block: 40px; }
}

/* ── mobile frames [74:1412] / [74:1814] / [74:2173] ──────────────────── */
/* The mobile frames drop the two columns: the index [74:1438] and the article
   [74:1566] become full-width bands of their own, each with 20px side padding.
   So the shared .container gives its padding back here and the two bands take
   it — that is what makes their boxes 390 wide, as the frames draw them.
   The three frames disagree on almost every number, so each one is written out
   under its --key rather than averaged into a compromise none of them draws. */
@media (max-width: 767px) {
  .doc-hero { padding-block: 48px; }
  .doc-hero--cookie { padding-block: 40px; }

  .doc-hero__title { gap: var(--space-4); font-size: 44px; line-height: 44px; }
  .doc-hero--privacy .doc-hero__title { gap: var(--space-4); font-size: 64px; line-height: 64px; }
  .doc-hero--cookie .doc-hero__title { font-size: 60px; line-height: 54px; }

  .doc-hero__rule { margin-block: var(--space-24); }
  .doc-hero__intro { margin-top: var(--space-20); font-size: var(--fs-base); line-height: 22px; }
  .doc-hero--cookie .doc-hero__intro { margin-top: var(--space-24); }
  .doc-hero__rule + .doc-hero__intro { margin-top: 0; font-size: var(--fs-body-sm); line-height: 24px; }
  .doc-hero__date { margin-top: var(--space-12); font-size: var(--fs-3xs); line-height: 14px; }

  .doc-layout { padding-bottom: 0; }
  .doc-layout .container { padding-inline: 0; }
  .doc-layout__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-layout--cookie { background: var(--color-surface); }

  /* index [74:1438] — a divided list, 47px rows (43 on cookie) */
  .doc-toc {
    position: static; max-height: none; overflow: visible;
    gap: var(--space-16); padding: var(--space-32) var(--container-pad-mobile);
  }
  .doc-toc__heading { letter-spacing: var(--ls-wide); color: var(--color-ink); }
  .doc-layout--terms .doc-toc__heading { color: #64748b; }
  .doc-toc__list { gap: 0; }
  .doc-toc__link {
    align-items: center;
    padding-block: 14px;
    box-shadow: inset 0 -1px 0 var(--color-border);
  }
  .doc-layout--cookie .doc-toc__link { padding-block: var(--space-12); }
  .doc-toc__no { font-size: var(--fs-body); line-height: 19px; }
  .doc-layout--cookie .doc-toc__no { font-size: var(--fs-base); line-height: 17px; }
  .doc-toc__name,
  .doc-layout--terms .doc-toc__name { font-size: var(--fs-base); line-height: 19px; }

  /* article [74:1566] — sections 40px apart, closed by a tinted hairline */
  .doc-article { gap: 40px; padding: var(--space-32) var(--container-pad-mobile) var(--space-48); }
  .doc-layout--privacy .doc-article { gap: var(--space-32); }
  .doc-rule { display: none; }              /* mobile closes each section instead */
  .doc-layout--privacy .doc-article { padding: var(--space-48) var(--container-pad-mobile) var(--space-64); }
  /* Every section but the last is closed by a hairline: a zero-height line on
     terms and cookie (so the trailing space is just the section gap), a 32px
     divider band with the line in its middle on privacy [74:1935]. */
  .doc-section {
    position: relative;
    padding-bottom: var(--space-16);
    box-shadow: inset 0 -1px 0 var(--color-border-tint);
  }
  .doc-layout--cookie .doc-section { padding-bottom: var(--space-12); }
  .doc-layout--cookie .doc-section:has(.doc-sub) { padding-bottom: var(--space-20); }
  .doc-layout--privacy .doc-section {
    padding-bottom: var(--space-48);
    box-shadow: none;
  }
  .doc-layout--privacy .doc-section::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-16);
    height: 1px; background: var(--color-border-tint);
  }
  .doc-section:last-of-type,
  .doc-layout--cookie .doc-section:last-of-type,
  .doc-layout--privacy .doc-section:last-of-type { padding-bottom: 0; box-shadow: none; }
  .doc-layout--privacy .doc-section:last-of-type::after { content: none; }

  /* heading = the mobile "section-header" frame: number line, gap, title */
  .doc-section__heading {
    scroll-margin-top: 120px;
    font-size: 24px; line-height: 29px; letter-spacing: 0;
  }
  .doc-layout--privacy .doc-section__heading { font-size: var(--fs-h4); line-height: 34px; }
  .doc-layout--cookie .doc-section__heading { font-size: 26px; line-height: 31px; }
  .doc-section__heading::before {
    content: attr(data-no);
    display: block; margin-bottom: var(--space-6);
    font-size: 24px; line-height: 29px; color: var(--color-brand);
  }
  .doc-layout--cookie .doc-section__heading::before {
    margin-bottom: var(--space-4);
    font-size: 22px; line-height: 26px;
  }

  .doc-section > * + * { margin-top: var(--space-16); }
  .doc-layout--cookie .doc-section > * + * { margin-top: var(--space-12); }
  .doc-layout--cookie .doc-section > * + .doc-sub { margin-top: var(--space-20); }

  .doc-p { font-size: var(--fs-body-sm); line-height: 24px; }
  .doc-layout--terms .doc-p { font-size: var(--fs-base); line-height: 22px; color: var(--color-text); }
  .doc-layout--cookie .doc-p { color: var(--color-text); }
  .doc-sub .doc-p { font-size: var(--fs-base); line-height: 22px; }
  .doc-list__item { font-size: var(--fs-base); line-height: 22px; }
  .doc-sub { padding-inline: 0; }
  .doc-h3 { font-size: var(--fs-md); line-height: 22px; }
  .doc-note { font-size: var(--fs-sm); line-height: 18px; color: var(--color-faint); }
  .doc-links { flex-direction: column; gap: var(--space-12); }
}