/* ==========================================================
   Справка / FAQ «Центр помощи» (Pages/Help.razor)
   ----------------------------------------------------------
   Редизайн 2026-07-04: «дешёвую» отдельную фиолетовую панель заменили на
   спокойный editorial-стиль лендинга. Никаких собственных --h-* палитр и
   градиентных плиток — берём общие токены приложения --app-* (сами флипаются
   в тёмной теме) и serif-заголовки (Georgia), как на публичном лендинге.

   Раскладка:
   • Десктоп (≥992px) — классический док-лейаут: слева липкое оглавление тем
     (.help-nav), справа контент. Ширину даёт обычный .container (до 1080px),
     поэтому на #helpPage БОЛЬШЕ НЕ вешаем .page-body-width.
   • Мобилка (<992px) — одна колонка; вместо бесполезной горизонтальной ленты
     чипов — компактный сворачиваемый список разделов (<details.help-m-toc>).

   Карточки FAQ — <details>-аккордеоны, оформленные как разделённая тонкими
   линиями «книжная» лента (без теней/градиентов), а не плавающие карточки.

   Интерактив (поиск, scroll-spy, плавный скролл, вспышка) — в /js/help.js.
   Он уже умеет боковое оглавление (.help-nav / .help-toc-link) — контракт был
   оставлен в JS, когда сайдбар временно убирали; сейчас возвращаем разметку.
   ========================================================== */

.help-page {
    /* Заголовки идут той же гарнитурой, что и вся страница (Inter). Раньше здесь была
       «книжная» serif-гарнитура (Georgia) — из-за неё справка выбивалась из остального
       приложения. Переменную --h-serif и её использования убрали, элементы наследуют
       font-family отсюда. */
    --h-nav-w: 232px;         /* ширина бокового оглавления */
    --h-gap: 56px;            /* зазор оглавление↔контент */
    /* Смещение под липкую шапку для sticky-сайдбара и scroll-margin якорей. */
    --h-top: calc(var(--app-header-height, 94px) + 20px);

    color: var(--app-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Никакой «рамки-панели»: справка живёт бесшовно в общем фоне приложения. */
    background: transparent;
    /* Отступ от шапки: у .app-main своего padding-top нет, страница задаёт сама.
       Значения те же, что на «Расписании» / «Заметках» / «Подписке». */
    padding-top: 0.5rem;
}

@media (min-width: 1024px) {
    .help-page {
        padding-top: 1.75rem;
    }
}

.help-page button { font-family: inherit; }

/* ---------- Двухколоночная оболочка ---------- */
.help-shell { display: block; }

@media (min-width: 992px) {
    .help-shell {
        display: grid;
        grid-template-columns: var(--h-nav-w) minmax(0, 1fr);
        column-gap: var(--h-gap);
        align-items: start;
    }
}

.help-content { min-width: 0; }

/* ---------- Боковое оглавление (десктоп) ---------- */
.help-nav-wrap { display: none; }

@media (min-width: 992px) {
    /* align-self:stretch обязателен: .help-shell стоит на align-items:start, из-за
       чего этот грид-элемент схлопывается до высоты своего содержимого. Тогда
       вложенному .help-nav (position:sticky) НЕКУДА липнуть внутри своего
       containing block — и оглавление уезжает вместе с текстом. Растягиваем
       обёртку на всю высоту строки, чтобы у sticky появился запас хода. */
    .help-nav-wrap { display: block; align-self: stretch; }

    .help-nav {
        position: sticky;
        top: var(--h-top);
        max-height: calc(100vh - var(--h-top) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2px 6px 24px 0;
    }
}

.help-nav-heading {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin: 0 0 18px;
}
.help-page .help-nav-heading { color: var(--app-muted); }

.help-nav-group + .help-nav-group { margin-top: 22px; }

.help-nav-group-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--app-text);
    margin: 0 0 7px;
}
.help-page .help-nav-group-title { color: var(--app-text); }

.help-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.help-page a.help-toc-link {
    display: block;
    padding: 5px 11px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    border-radius: 0 7px 7px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--app-text-secondary);
    text-decoration: none;
    transition: color .12s, background-color .12s, border-color .12s;
}
.help-page a.help-toc-link:hover {
    color: var(--app-text);
    background: var(--app-hover);
}
.help-page a.help-toc-link.is-active {
    color: var(--app-accent);
    font-weight: 600;
    border-left-color: var(--app-accent);
    background: var(--app-accent-soft);
}
html.dark .help-page a.help-toc-link { color: var(--app-text-secondary); }
html.dark .help-page a.help-toc-link:hover { color: var(--app-text); }
html.dark .help-page a.help-toc-link.is-active { color: var(--app-accent); }

/* ---------- Шапка контента ---------- */
.help-head { margin-bottom: 24px; }

.help-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-accent);
    margin-bottom: 12px;
}
.help-page .help-eyebrow { color: var(--app-accent); }

/* Размер, вес, трекинг и фирменный градиент задаёт глобальное правило .app-main h1
   (Styles/app.css) — здесь только отступ. Прежние font-size:40px/font-weight:600 всё
   равно проигрывали ему по специфичности и были мёртвым кодом.
   Заливку color сознательно НЕ задаём: `.help-page .help-title` (0,2,0) перебивал
   `.app-main h1` (0,1,1) и делал заголовок сплошным, убивая background-clip:text. */
.help-title {
    margin: 0;
}


/* ---------- Поиск ---------- */
.help-search-wrap {
    position: relative;
    margin-top: 4px;
}

.help-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    display: flex;
    pointer-events: none;
}
.help-page .help-search-icon { color: var(--app-muted); }

.help-page input.help-search {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 46px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-family: inherit;
    /* 16px — иначе iOS зумит поле при фокусе. */
    font-size: 16px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.help-page input.help-search::placeholder { color: var(--app-muted); opacity: .9; }
.help-page input.help-search:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.help-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--app-surface-alt);
    color: var(--app-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.help-search-clear.is-visible { display: flex; }

/* ---------- Быстрые запросы ---------- */
.help-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.help-quick-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-muted);
    margin-right: 2px;
}
.help-page .help-quick-label { color: var(--app-muted); }

.help-page button.help-q {
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
.help-page button.help-q:hover {
    color: var(--app-accent);
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

/* ---------- Онбординг «Начните за 3 шага» ----------
   Спокойный bordered-callout вместо фиолетового градиента. */
.help-onb {
    margin-top: 24px;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}

.help-onb-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
}
.help-page .help-onb-title { color: var(--app-text); }
.help-page .help-onb-spark { display: flex; color: var(--app-accent); }

.help-onb-steps {
    list-style: none;
    counter-reset: help-onb;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.help-onb-steps > li {
    counter-increment: help-onb;
    position: relative;
    padding-left: 32px;
    min-height: 24px;
    display: flex;
    align-items: center;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
}
.help-page .help-onb-steps > li { color: var(--app-text); }
.help-onb-steps > li::before {
    content: counter(help-onb);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    border-radius: 7px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-onb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.help-page a.help-onb-btn,
.help-page button.help-onb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 17px;
    border-radius: 11px;
    border: 1px solid var(--app-accent);
    background: var(--app-accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, background-color .15s;
}
.help-page a.help-onb-btn:hover,
.help-page button.help-onb-btn:hover { filter: brightness(1.06); }
html.dark .help-page a.help-onb-btn,
html.dark .help-page button.help-onb-btn { color: #fff; }

/* Вторичная кнопка — контурная. */
.help-page a.help-onb-btn.ghost,
.help-page button.help-onb-btn.ghost {
    background: transparent;
    color: var(--app-accent);
    border-color: var(--app-border);
}
.help-page a.help-onb-btn.ghost:hover,
.help-page button.help-onb-btn.ghost:hover {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    filter: none;
}
html.dark .help-page a.help-onb-btn.ghost,
html.dark .help-page button.help-onb-btn.ghost { color: var(--app-accent); }

/* ---------- Мобильный список разделов (замена ленты чипов) ---------- */
.help-m-toc { display: none; }

@media (max-width: 991.98px) {
    .help-m-toc {
        display: block;
        margin-top: 24px;
    }
}

.help-m-toc > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--app-text);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.help-m-toc > summary::-webkit-details-marker { display: none; }
.help-page .help-m-toc > summary { color: var(--app-text); }
.help-m-toc-chevron { display: flex; color: var(--app-muted); transition: transform .2s; }
.help-m-toc[open] .help-m-toc-chevron { transform: rotate(90deg); }

.help-m-toc-panel {
    margin-top: 6px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--app-surface);
}
.help-page a.help-m-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    font-size: 14.5px;
    color: var(--app-text);
    text-decoration: none;
}
.help-page a.help-m-link + a.help-m-link { border-top: 1px solid var(--app-border); }
.help-page a.help-m-link:active { background: var(--app-hover); }
.help-m-link svg { color: var(--app-muted); flex: none; }
html.dark .help-page a.help-m-link { color: var(--app-text); }

/* ---------- Тело ---------- */
.help-body { margin-top: 40px; }

.help-section { margin-bottom: 44px; }
.help-section:last-of-type { margin-bottom: 0; }

.help-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--app-border);
}

/* Плоская акцентная иконка раздела — без плитки/градиента/тени. */
.help-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-accent);
    flex-shrink: 0;
}
.help-page .help-section-icon { color: var(--app-accent); }

.help-section-title {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}
.help-page .help-section-title { color: var(--app-text); }

/* Карточки как разделённая тонкими линиями «лента» вопросов. */
.help-cards { display: flex; flex-direction: column; }

.help-specialist-divider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 18px 0 6px;
    padding: 16px 2px 0;
    border-top: 1px solid var(--app-border);
}
.help-page .help-specialist-divider span {
    color: var(--app-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}
.help-page .help-specialist-divider small {
    color: var(--app-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

/* Карточка-аккордеон (<details>). Свёрнута до строки-вопроса; раскрытие нативное
   + через help.js (по якорю/оглавлению/поиску). Анимация высоты — ::details-content
   (Chrome/Edge 131+); в остальных браузерах — мгновенно. */
.help-card {
    border-bottom: 1px solid var(--app-border);
    scroll-margin-top: var(--h-top);
    border-radius: 8px;
    interpolate-size: allow-keywords;
    transition: background-color .35s;
}
.help-card::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .28s ease, content-visibility .28s allow-discrete;
}
.help-card[open]::details-content { block-size: auto; }

.help-card-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 10px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}
.help-card-summary::-webkit-details-marker { display: none; }
.help-card-summary::marker { content: ''; }
.help-card-summary:hover { background: var(--app-hover); border-radius: 8px; }

.help-card-chevron {
    display: flex;
    color: var(--app-muted);
    transition: transform .25s, color .15s;
}
.help-card[open] .help-card-chevron { transform: rotate(90deg); }
.help-card-summary:hover .help-card-chevron { color: var(--app-accent); }

.help-card-q {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.005em;
    margin: 0;
    line-height: 1.4;
}
.help-page .help-card-q { color: var(--app-text); }

.help-card-body { padding: 0 10px 20px; }

.help-card.is-flash {
    background: var(--app-accent-soft);
    animation: help-faqpop .45s ease;
}

.help-card-divider {
    height: 1px;
    background: var(--app-border);
    margin: 18px 0 0;
}

.help-page a.help-card-ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    border: none;
    background: none;
    color: var(--app-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.help-page a.help-card-ask:hover { text-decoration: underline; }
html.dark .help-page a.help-card-ask { color: var(--app-accent); }

/* ---------- Ответ (markdown → html) ---------- */
.help-answer {
    color: var(--app-text-secondary);
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: break-word;
}
.help-page .help-answer,
.help-page .help-answer p,
.help-page .help-answer li,
.help-page .help-answer span { color: var(--app-text-secondary); }

.help-answer > :first-child { margin-top: 0; }
.help-answer > :last-child { margin-bottom: 0; }
.help-answer p { margin: 0 0 11px; }

.help-answer strong { font-weight: 700; }
.help-page .help-answer strong { color: var(--app-text); }

/* Нумерованный список → «шаги» с округлой плашкой-цифрой. */
.help-answer ol {
    list-style: none;
    counter-reset: help-step;
    margin: 0 0 11px;
    padding: 0;
}
.help-answer ol > li {
    counter-increment: help-step;
    position: relative;
    padding-left: 38px;
    min-height: 26px;
    line-height: 1.55;
}
.help-answer ol > li + li { margin-top: 11px; }
.help-answer ol > li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Маркированный список → точка цвета акцента. */
.help-answer ul {
    list-style: none;
    margin: 0 0 11px;
    padding: 0;
}
.help-answer ul > li {
    position: relative;
    padding-left: 17px;
    line-height: 1.55;
}
.help-answer ul > li + li { margin-top: 8px; }
.help-answer ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-accent);
}
.help-answer li > p { margin: 0; }

/* ---------- Пусто ---------- */
.help-empty {
    display: none;
    text-align: center;
    padding: 64px 20px;
    color: var(--app-text-secondary);
}
.help-empty.is-visible { display: block; }
.help-empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    opacity: .5;
    color: var(--app-muted);
}
.help-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 6px;
}
.help-page .help-empty-title { color: var(--app-text); }
.help-empty-text { font-size: 14.5px; margin-bottom: 20px; }
.help-page .help-empty-text { color: var(--app-text-secondary); }
.help-empty-text .help-empty-q { color: var(--app-text); font-weight: 600; }
.help-empty-reset {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 11px;
    cursor: pointer;
}

/* ---------- Нижние CTA ---------- */
.help-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    margin-top: 16px;
}
/* Первый CTA идёт сразу после последнего раздела — отделяем его заметнее. */
.help-section + .help-cta { margin-top: 40px; }

.help-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.help-page .help-cta-icon { color: var(--app-accent); }

.help-cta-body { flex: 1; min-width: 0; }
.help-cta-title { font-size: 16px; font-weight: 700; }
.help-page .help-cta-title { color: var(--app-text); }
.help-cta-text { font-size: 14px; color: var(--app-text-secondary); margin-top: 3px; }
.help-page .help-cta-text { color: var(--app-text-secondary); }

.help-page a.help-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 11px;
    border: 1px solid var(--app-accent);
    background: var(--app-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s;
}
.help-page a.help-cta-btn:hover { filter: brightness(1.06); }
html.dark .help-page a.help-cta-btn { color: #fff; }

/* ---------- Клавиатурный фокус ---------- */
.help-card-summary:focus-visible,
.help-page a.help-toc-link:focus-visible,
.help-page a.help-m-link:focus-visible,
.help-m-toc > summary:focus-visible,
.help-page a.help-card-ask:focus-visible,
.help-page a.help-cta-btn:focus-visible,
.help-page button.help-q:focus-visible,
.help-page a.help-onb-btn:focus-visible,
.help-page button.help-onb-btn:focus-visible,
.help-empty-reset:focus-visible,
.help-search-clear:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

/* ---------- Вспышка карточки ---------- */
@keyframes help-faqpop {
    0%   { transform: scale(.992); }
    55%  { transform: scale(1.004); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .help-card.is-flash { animation: none; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 991.98px) {
    .help-title { font-size: 32px; }
    .help-head { margin-bottom: 20px; }
    .help-body { margin-top: 28px; }
}

@media (max-width: 600px) {
    .help-title { font-size: 28px; }
    .help-section-title { font-size: 21px; }
    .help-cta { flex-direction: column; align-items: flex-start; }
    .help-page a.help-cta-btn { width: 100%; justify-content: center; }
}