/* Бюро Знахідок — the prose template shared by the legal pages and the guide.
 *
 * Loaded after shell.css, which owns the tokens, the reset and the navigation
 * panel; this file is only what a column of text needs. The guide loads
 * guide.css on top of it.
 */

body {
  line-height: 26px;
}

/* The content column. The panel already carries the page's chrome, so the
   main area only has to set its gutter and its rhythm. */
.site-main {
  padding: var(--space-8) var(--pad-main) var(--space-9);
}

.prose,
.crumbs {
  max-width: var(--column);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ page */

h1 {
  margin: 0;
  font-size: var(--text-h-lg);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* The rule under the meta line is decoration, so it lives in CSS rather than
   as an empty element repeated on every page. */
.updated {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono);
  line-height: 18px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.updated::after {
  content: "";
  display: block;
  margin: var(--space-6) 0;
  height: 1px;
  background: var(--line);
}

.updated code {
  font: inherit;
}

h2 {
  margin: var(--space-9) 0 var(--space-2);
  font-size: var(--text-h);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  text-wrap: pretty;
}

h3 {
  margin: var(--space-6) 0 10px;
  font-size: var(--text-body-lg);
  line-height: 26px;
  font-weight: 700;
  letter-spacing: var(--tracking-micro);
}

p {
  margin: 0 0 20px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Ordinary lists, spaced with margins rather than a flex `gap`. A blanket
   `display: flex` here reaches every list on the page — the breadcrumb trail,
   the navigation, the row of social glyphs — and each one then has to undo a
   column direction it never asked for. */
ul,
ol {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--ink-2);
}

li + li {
  margin-top: 8px;
}

li::marker {
  color: var(--muted);
}

strong {
  color: var(--ink);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Callout for a paragraph that has to stand out: processing deadlines, the
   contact for complaints, what deleting an account actually does. Framed
   rather than raised — the shell draws separation with a rule. */
.note {
  margin: 0 0 20px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}

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

.note h3 {
  margin: 0 0 8px;
}

@media (max-width: 759px) {
  h1 {
    font-size: 27px;
  }

  h2 {
    margin-top: var(--space-8);
    font-size: 21px;
  }
}