/* Справка под калькулятором (вставляет tools/build.mjs): что за индекс, формула, интерпретация, вопросы, источники.
   Не зависит от токенов страницы (у VASI свои, у остальных site.css), цвет — индекса (--idx), если он задан. */
.guide {
  --g-ink: #0f2e2b; --g-ink-2: #3b5551; --g-rule: #c3d0cb; --g-sheet: #fbfcfb;
  --g: var(--idx, var(--accent, #0f2e2b));
  margin: 2.5rem 0 0; scroll-margin-top: 5rem; padding: 2.25rem clamp(1rem, 4vw, 3.5rem) 1rem;
  border-top: 1px solid var(--g-rule);
  color: var(--g-ink); font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.6;
}
.guide-in { max-width: 72ch; }
.guide h1, .guide h2 {
  margin: 0 0 0.75rem; font-family: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: 0.005em;
}
.guide h3 {
  margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--g);
}
.guide p, .guide ul, .guide ol { margin: 0 0 0.75rem; }
.guide ul, .guide ol { padding-left: 1.25rem; }
.guide li { margin: 0.2rem 0; }
.guide b { font-weight: 600; }
.guide a { color: var(--g-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.guide a:hover { color: var(--g); }
.guide small { color: var(--g-ink-2); }
.guide details { border-bottom: 1px solid var(--g-rule); }
.guide details:first-of-type { border-top: 1px solid var(--g-rule); }
.guide summary { cursor: pointer; padding: 0.6rem 0; font-weight: 600; list-style-position: outside; margin-left: 1.1rem; }
.guide summary::marker { color: var(--g); }
.guide details p { margin: 0 0 0.75rem 1.1rem; color: var(--g-ink-2); }
.guide .refs { font-size: 0.875rem; color: var(--g-ink-2); }
.guide-more ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.guide-more a {
  display: inline-block; padding: 0.35rem 0.7rem; border: 1px solid var(--g-rule); border-radius: 6px;
  background: var(--g-sheet); text-decoration: none; font-weight: 600;
}
.guide-more a span { font-weight: 400; color: var(--g-ink-2); }
.guide-more a:hover { border-color: var(--g-ink); color: var(--g-ink); }

@media print { .guide { display: none !important; } }