/* Глинка — 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 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. */
.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); }