/* Глинка — standalone content pages (/pochemu-glinka/; RUS-493, build_pages.py).
   Loaded after legal.css and scenarios.css, which supply the tokens, the nav,
   the reading column, the prose, the «Обновлено» line, the figure — its link
   and its height cap included (RUS-823: a page figure is an article figure) —
   and the CTA row. This file adds only the three things a page has and they do
   not: the question list, the link line under a figure and the social line
   after the CTA. Light theme only, like the rest of the static site
   (AUTHORING). */

/* ---------- the link line under a figure ---------- */
/* «Открыть этот пример · Сценарии». Pulled up against the figure's 30px bottom
   margin so it reads as belonging to the picture, not as a new paragraph. Keyed
   on the class build_pages.link_lines() gives a paragraph made ONLY of links,
   so a sentence that ends in two links (the share line) stays a paragraph. */
.legal .page-links{ margin:-12px 0 26px; font-size:15px; line-height:1.6; }

/* ---------- «Вопросы» ---------- */
/* The landing's .qa idiom (site/index.html «faq»): a rule between questions, no
   disclosure marker, a «+» that turns to «×» when open. Drawn with two
   gradients on ::after rather than the landing's inline SVG, so the <summary>
   holds the question text and nothing else — what check_pages.mjs compares
   against the FAQPage JSON-LD. No .ix index column, so the answer is not
   indented: the reading column is already narrow on a phone. */
.legal .page-faq{ margin:6px 0 0; border-top:1px solid var(--line); }
.legal details.qa{ border-bottom:1px solid var(--line); }
.legal details.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:16px;
  padding:18px 2px 18px 0;
  font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-0.01em;
  color:var(--ink);
}
.legal details.qa summary::-webkit-details-marker{ display:none; }
.legal details.qa summary::after{
  content:""; flex:none; margin-left:auto; width:13px; height:13px;
  color:var(--muted);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition:transform .22s ease;
}
.legal details.qa[open] summary::after{ transform:rotate(45deg); color:var(--accent); }
.legal details.qa .ans{ padding:0 0 20px; }
.legal details.qa .ans p{ margin:0; }

/* ---------- the social line after the CTA ---------- */
/* Outside <article class="legal">, like the buttons above it, so .legal a does
   not reach these two: they get the prose-link look spelled out here. */
.page-social{ margin:18px 0 0; font-size:14px; line-height:1.6; color:var(--muted); }
.page-social a{
  color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(194,85,44,0.35);
}
.page-social a:hover{ text-decoration-color:var(--accent); }