/* Руководство (/help). Молодёжно и читаемо: чат как главный образ (руководство — про то, что писать боту),
   очень жирные заголовки, акцент электрик-фиолет, маркер «хайлайтер» на важном. Две темы:
   по системной (prefers-color-scheme) и вручную (html[data-theme]). Без inline-стилей и скриптов (CSP). */

body.help {
  --h-bg: #f5f4ff; --h-surface: #ffffff; --h-ink: #15133a; --h-ink2: #4d4a78; --h-line: #dedcf5;
  --h-accent: #5b3df5; --h-on-accent: #ffffff; --h-tint: #ebe7ff; --h-mark: #d6ff5c;
  --h-bubble-bot: #ffffff; --h-shadow: 0 1px 0 rgba(21, 19, 58, .06), 0 8px 24px rgba(91, 61, 245, .08);
  background: var(--h-bg); color: var(--h-ink);
  font: 400 17px/1.65 "Golos Text", system-ui, sans-serif; font-variant-numeric: normal;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.help {
    --h-bg: #100f24; --h-surface: #1b1936; --h-ink: #f3f2ff; --h-ink2: #b4b1dc; --h-line: #2e2b55;
    --h-accent: #a393ff; --h-on-accent: #14102e; --h-tint: #28244f; --h-mark: rgba(214, 255, 92, .2);
    --h-bubble-bot: #1b1936; --h-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
html[data-theme="dark"] body.help {
  --h-bg: #100f24; --h-surface: #1b1936; --h-ink: #f3f2ff; --h-ink2: #b4b1dc; --h-line: #2e2b55;
  --h-accent: #a393ff; --h-on-accent: #14102e; --h-tint: #28244f; --h-mark: rgba(214, 255, 92, .2);
  --h-bubble-bot: #1b1936; --h-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

.help .shell { max-width: 1120px; margin: 0 auto; padding: 18px 20px 80px; }
.help :focus-visible { outline: 3px solid var(--h-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- верхняя полоса */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.back { color: var(--h-ink2); text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 999px;
        background: var(--h-surface); box-shadow: var(--h-shadow); }
.back:hover { color: var(--h-ink); }
.theme { background: var(--h-surface); border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 20px;
         line-height: 1; box-shadow: var(--h-shadow); }
.theme:hover { background: var(--h-tint); }
.t-sun { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .t-moon { display: none; }
  html:not([data-theme="light"]) .t-sun { display: inline; }
}
html[data-theme="dark"] .t-moon { display: none; }
html[data-theme="dark"] .t-sun { display: inline; }
html[data-theme="light"] .t-sun { display: none; }
html[data-theme="light"] .t-moon { display: inline; }

/* ---------------------------------------------------------------- шапка: заголовок и мини-чат */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center;
        margin-bottom: 56px; }
.hero h1 { margin: 0 0 18px; font-size: clamp(40px, 7vw, 68px); font-weight: 900; line-height: .98; letter-spacing: -.035em; }
.hero p { margin: 0 0 12px; font-size: 19px; line-height: 1.55; color: var(--h-ink2); max-width: 44ch; }
.hero .headerlink { display: none; }

.chat { display: grid; gap: 10px; justify-items: start; }
.bubble { margin: 0; padding: 12px 16px; border-radius: 22px 22px 22px 6px; font-weight: 500; line-height: 1.4;
          max-width: 100%; box-shadow: var(--h-shadow); }
.bubble.me { justify-self: end; background: var(--h-accent); color: var(--h-on-accent); border-radius: 22px 22px 6px 22px; }
.bubble.bot { background: var(--h-bubble-bot); display: grid; gap: 4px; }
.bubble.bot b { font-weight: 800; }
.btns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.btns i { font-style: normal; font-size: 14px; font-weight: 650; background: var(--h-tint); color: var(--h-accent);
          padding: 5px 12px; border-radius: 999px; }

/* ---------------------------------------------------------------- оглавление */
.grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.rail { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; padding-right: 6px; }
.rail-title { margin: 0 0 10px; font-weight: 850; font-size: 18px; letter-spacing: -.01em; }
.rail ul, .fold ul { list-style: none; margin: 0; padding: 0; }
.rail li ul, .fold li ul { padding-left: 14px; }
.rail a, .fold a { display: block; padding: 7px 12px; margin: 1px 0; border-radius: 12px; color: var(--h-ink2);
                   text-decoration: none; font-weight: 550; line-height: 1.3; }
.rail a:hover, .fold a:hover { background: var(--h-tint); color: var(--h-ink); }
.fold { display: none; }

/* ---------------------------------------------------------------- текст */
.doc { min-width: 0; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.6em; font-size: clamp(26px, 4.2vw, 34px); font-weight: 850; line-height: 1.15;
            letter-spacing: -.025em; scroll-margin-top: 20px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 20px; font-weight: 750; letter-spacing: -.01em; scroll-margin-top: 20px; }
.prose a { color: var(--h-accent); font-weight: 600; text-underline-offset: 3px; }
.prose .headerlink { margin-left: .35em; color: var(--h-ink2); text-decoration: none; font-weight: 500; opacity: 0;
                     transition: opacity .15s; }
.prose h2:hover .headerlink, .prose h3:hover .headerlink, .prose .headerlink:focus-visible { opacity: 1; }
.prose strong { font-weight: 700; background: linear-gradient(var(--h-mark), var(--h-mark)) 0 88% / 100% .55em no-repeat; }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { padding-left: .2em; }
.prose li + li { margin-top: .45em; }
.prose ul > li::marker { color: var(--h-accent); }
.prose ol > li::marker { color: var(--h-accent); font-weight: 800; }

/* примеры того, что писать боту, — «пузыри» сообщений */
.prose code { font: 600 .92em/1 "Golos Text", system-ui, sans-serif; background: var(--h-tint); color: var(--h-accent);
              padding: .22em .6em; border-radius: 999px; overflow-wrap: anywhere; box-decoration-break: clone;
              -webkit-box-decoration-break: clone; }

.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; border-radius: 16px;
               background: var(--h-surface); box-shadow: var(--h-shadow); }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--h-line); }
.prose th { color: var(--h-ink2); font-weight: 650; font-size: 15px; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { white-space: nowrap; }

/* ---------------------------------------------------------------- телефон */
@media (max-width: 860px) {
  .help .shell { padding: 14px 16px 64px; }
  .hero { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: none; }
  .fold { display: block; margin-bottom: 28px; background: var(--h-surface); border-radius: 18px; box-shadow: var(--h-shadow); }
  .fold summary { padding: 14px 18px; font-weight: 750; cursor: pointer; list-style: none; border-radius: 18px; }
  .fold summary::-webkit-details-marker { display: none; }
  .fold ul { padding: 0 10px 12px; }
  .prose { font-size: 16.5px; }
  .prose td:first-child { white-space: normal; }
  .prose th, .prose td { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) { .prose .headerlink { transition: none; } }