/* ==========================================================
   Help / FAQ "Центр помощи" (Pages/Help.razor)
   ----------------------------------------------------------
   Порт дизайна из Claude Design. Единая «фиолетовая» гамма (#6c5ce7),
   общая с блоком «С чего начать» на дашборде — прохладный лавандовый фон
   + один акцент-бренд на все группы. Токены --h-* заскоуплены на .help-page,
   чтобы не задевать остальной сайт (у которого свои --app-*). Тёмная тема
   включается общим html.dark (как у всего приложения), здесь только
   переопределяем --h-* токены.

   Интерактив (поиск, scroll-spy, плавный скролл к карточке, вспышка)
   живёт в /js/help.js. Страница рендерится статически (SSR), JS
   навешивается на первой загрузке и на каждом Blazor 'enhancedload'.

   Почему отдельный CSS, а не Tailwind: у приложения уже есть
   страничные стили такого рода (day-plan-board.css, misha-companion.css,
   admin.css). Дизайн опирается на CSS-переменные, keyframes, медиа-
   запросы и счётчики списков — это чище держать в одном файле, чем
   размазывать произвольными tw-[...] значениями.
   ========================================================== */

.help-page {
    /* --- светлая палитра — единая «фиолетовая» гамма с блоком «С чего начать» --- */
    --h-frame: #ffffff;          /* фон карточек */
    --h-surface: #f4f3fb;        /* фон самой панели справки (прохладный лавандовый) */
    --h-surface-2: #eceafa;      /* вторичная поверхность (чипы, кнопка очистки) */
    --h-border: rgba(76, 64, 160, .12);
    --h-text: #211f2e;
    --h-text-dim: #6f6b82;
    /* Единый акцент = фиолетовый из блока «С чего начать» (#6c5ce7). Смысловые
       группы делят одну гамму и отличаются только иконкой, а не цветом. */
    --h-brand: #6c5ce7;
    --h-brand-soft: rgba(108, 92, 231, .12);
    --h-brand-shadow: rgba(108, 92, 231, .4);
    --h-purple: #6c5ce7;
    --h-purple-soft: rgba(108, 92, 231, .12);
    --h-orange: #6c5ce7;
    --h-orange-soft: rgba(108, 92, 231, .12);
    --h-green: #6c5ce7;
    --h-green-soft: rgba(108, 92, 231, .12);
    /* Акцентный градиент для иконок-плиток и CTA (как у блока «С чего начать»). */
    --h-grad: linear-gradient(135deg, #6c5ce7 0%, #8b7bf0 55%, #a99bf7 100%);

    /* отступ для sticky-элементов и якорей: высота прилипшей шапки + воздух */
    --h-top: calc(var(--app-header-height, 94px) + 1.25rem);

    position: relative;
    background: var(--h-surface);
    color: var(--h-text);
    border: 1px solid var(--h-border);
    border-radius: 22px;
    padding: 40px 44px 56px;
    font-family: 'Golos Text', system-ui, -apple-system, 'Inter', BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 1px 2px rgba(40, 33, 80, .04), 0 30px 60px -40px rgba(40, 33, 80, .30);
}

html.dark .help-page {
    /* --- тёмная палитра — та же фиолетовая гамма, прохладный тёмный фон --- */
    /* Карточка чуть светлее фона приложения (#121212) — на десктопе панель теперь
       бесшовна с фоном, поэтому карточкам нужна заметная «приподнятость», а не
       утопленность (тени на тёмном почти не читаются). */
    --h-frame: #221f33;
    --h-surface: #1f1c2e;
    --h-surface-2: #2a2640;
    --h-border: rgba(200, 190, 255, .10);
    --h-text: #f0eefa;
    --h-text-dim: #aba5c4;
    --h-brand: #9b8ff5;
    --h-brand-soft: rgba(155, 143, 245, .18);
    --h-brand-shadow: rgba(155, 143, 245, .5);
    --h-purple: #9b8ff5;
    --h-purple-soft: rgba(155, 143, 245, .18);
    --h-orange: #9b8ff5;
    --h-orange-soft: rgba(155, 143, 245, .18);
    --h-green: #9b8ff5;
    --h-green-soft: rgba(155, 143, 245, .18);
    --h-grad: linear-gradient(135deg, #7a6af0 0%, #8b7bf0 55%, #a99bf7 100%);

    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 60px -40px rgba(0, 0, 0, .7);
}

/* Базовый цвет текста внутри панели — двух-классовая специфичность (0,2,0)
   обыгрывает глобальные html.dark p/span/div (0,1,1), так что тёплый --h-text
   не перебивается общим --app-text. Ссылки правим отдельно ниже. */
.help-page,
.help-page p,
.help-page h1,
.help-page h2,
.help-page h3,
.help-page li,
.help-page span,
.help-page div {
    color: var(--h-text);
}

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

/* ---------- Шапка ---------- */
.help-head {
    margin-bottom: 26px;
}

.help-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border-radius: 30px;
    background: var(--h-purple-soft);
    color: var(--h-purple);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
}
.help-page .help-badge { color: var(--h-purple); }

.help-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0;
    line-height: 1.1;
}

.help-sub {
    color: var(--h-text-dim);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 560px;
}
.help-page .help-sub { color: var(--h-text-dim); }

/* ---------- Поиск ---------- */
.help-search-wrap {
    position: relative;
    max-width: 620px;
}

.help-search-icon {
    position: absolute;
    left: 18px;
    top: 27px;
    transform: translateY(-50%);
    color: var(--h-text-dim);
    display: flex;
    pointer-events: none;
}

.help-page input.help-search {
    width: 100%;
    height: 54px;
    padding: 0 46px 0 50px;
    border-radius: 15px;
    border: 1px solid var(--h-border);
    background: var(--h-frame);
    color: var(--h-text);
    font-family: inherit;
    /* 16px — иначе iOS зумит поле при фокусе и не отзумивает обратно */
    font-size: 16px;
    outline: none;
    box-shadow: 0 1px 2px rgba(40, 33, 80, .04);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.help-page input.help-search::placeholder {
    color: var(--h-text-dim);
    opacity: .85;
}

.help-page input.help-search:focus {
    border-color: var(--h-brand);
    background: var(--h-frame);
    box-shadow: 0 0 0 3px var(--h-brand-soft);
}

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

.help-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--h-text-dim);
}
.help-page .help-hint { color: var(--h-text-dim); }

.help-hint-spark {
    display: flex;
    color: var(--h-purple);
}

.help-hint-demo {
    border: none;
    background: none;
    color: var(--h-purple);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.help-page .help-hint-demo { color: var(--h-purple); }

/* ---------- Мобильная прилипающая лента чипов ---------- */
.help-rail {
    display: none;
    position: sticky;
    top: var(--app-header-height, 94px);
    z-index: 6;
    margin: 18px -16px 0;
    padding: 10px 16px;
    background: var(--h-surface);
    border-bottom: 1px solid var(--h-border);
}

.help-rail-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.help-rail-track::-webkit-scrollbar { display: none; }

.help-page a.help-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--h-text-dim);
    background: var(--h-frame);
    box-shadow: 0 1px 2px rgba(40, 33, 80, .05);
    transition: background .15s, color .15s;
}
.help-page a.help-chip.is-active {
    color: #fff;
    background: var(--h-brand);
    box-shadow: none;
}
html.dark .help-page a.help-chip { color: var(--h-text-dim); }
html.dark .help-page a.help-chip.is-active { color: #fff; }

/* ---------- Тело: оглавление + карточки ---------- */
.help-body {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 34px;
}

/* --- Прилипающее оглавление (TOC) --- */
.help-nav {
    position: sticky;
    top: var(--h-top);
    flex: 0 0 240px;
    width: 240px;
    /* Длинный список (12 пунктов в «Занятиях») перерастает экран → нижние группы
       и активный пункт уезжают под фолд, и не видно, какой раздел сейчас читаешь.
       Делаем оглавление собственным скролл-вьюпортом по высоте экрана; help.js
       подкручивает его так, чтобы активный пункт всегда оставался виден. */
    max-height: calc(100dvh - var(--h-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.help-nav-group { margin-bottom: 18px; }

.help-nav-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    margin-bottom: 7px;
}

.help-nav-group-icon {
    display: flex;
    color: var(--h-text-dim);
}

.help-nav-group-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--h-text-dim);
}
.help-page .help-nav-group-label { color: var(--h-text-dim); }

.help-page a.help-toc-link {
    display: block;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    margin-bottom: 1px;
    color: var(--h-text-dim);
    font-weight: 500;
}
.help-page a.help-toc-link:hover { background: var(--h-surface-2); }
.help-page a.help-toc-link.is-active {
    color: var(--h-brand);
    background: var(--h-brand-soft);
    border-left-color: var(--h-brand);
    font-weight: 600;
}
html.dark .help-page a.help-toc-link { color: var(--h-text-dim); }
html.dark .help-page a.help-toc-link:hover { background: var(--h-surface-2); }
html.dark .help-page a.help-toc-link.is-active { color: var(--h-brand); }

.help-toc-divider {
    margin: 16px 12px 7px;
    padding-top: 12px;
    border-top: 1px solid var(--h-border);
    color: var(--h-text-dim);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
}

/* --- Карточки --- */
.help-main {
    flex: 1;
    min-width: 0;
}

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

.help-section-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.help-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Единый фиолетовый градиент-плитка с белым глифом (как иконка-бот в блоке
       «С чего начать»); смысловые группы различает форма иконки, не цвет. */
    color: #fff;
    background: var(--h-grad);
    box-shadow: 0 6px 16px -8px var(--h-brand-shadow);
}

.help-section-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

.help-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.help-specialist-divider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 14px 0 2px;
    padding: 18px 0 0;
    border-top: 1px solid var(--h-border);
}

.help-specialist-divider span {
    color: var(--h-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.help-specialist-divider small {
    color: var(--h-text-dim);
    font-size: 13px;
    line-height: 1.45;
}

.help-card {
    background: var(--h-frame);
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: 0 1px 2px rgba(40, 33, 80, .05), 0 10px 26px -18px rgba(40, 33, 80, .16);
    transition: box-shadow .35s, border-color .35s;
    scroll-margin-top: var(--h-top);
}

.help-card.is-flash {
    border-color: var(--h-brand-soft);
    box-shadow: 0 0 0 3px var(--h-brand-soft), 0 18px 40px -18px var(--h-brand-shadow);
    animation: help-faqpop .45s ease;
}

.help-card-q {
    font-size: 18.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 14px;
    line-height: 1.35;
}

.help-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 14px;
}

.help-card-head .help-card-q {
    margin: 0;
}

.help-card-accent {
    display: block;
    justify-self: end;
    width: 104px;
    aspect-ratio: 1 / 1;
    background-image: var(--help-card-accent);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
}

.help-card-divider {
    height: 1px;
    background: var(--h-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(--h-purple);
    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(--h-purple); }

/* ---------- Ответ (markdown → html) ---------- */
.help-answer {
    color: var(--h-text-dim);
    font-size: 15px;
    line-height: 1.62;
    /* длинные слова/ссылки не должны выпирать за карточку на узких экранах */
    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(--h-text-dim); }

.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(--h-text); }

/* Нумерованный список → «шаги» с округлой плашкой-цифрой.
   Маркер — абсолютно позиционированный ::before, а сам <li> остаётся блочным,
   чтобы текст с инлайновым <strong> шёл обычным потоком и переносился по ширине
   карточки. Раньше <li> был display:flex и «блокифицировал» инлайновые <strong>
   в отдельные flex-колонки → текст не переносился и вылезал вправо (моб.). */
.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: 39px;
    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(--h-brand-soft);
    color: var(--h-brand);
    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(--h-brand);
}

.help-answer li > p { margin: 0; }

/* ---------- Пусто (ничего не нашлось) ---------- */
.help-empty {
    display: none;
    text-align: center;
    padding: 70px 20px;
    color: var(--h-text-dim);
}
.help-empty.is-visible { display: block; }

.help-empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    opacity: .5;
    color: var(--h-text-dim);
}

.help-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 6px;
}

.help-empty-text {
    font-size: 14.5px;
    margin-bottom: 20px;
}

.help-empty-text .help-empty-q { color: var(--h-text); font-weight: 600; }

.help-empty-reset {
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 12px;
    cursor: pointer;
}

/* ---------- Нижний CTA ---------- */
.help-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    border-radius: 18px;
    background: var(--h-purple-soft);
    border: 1px solid transparent;
    margin-top: 16px;
}

.help-cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--h-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -10px var(--h-brand-shadow);
}

.help-cta-body { flex: 1; }

.help-cta-title { font-size: 16.5px; font-weight: 700; }
.help-cta-text { font-size: 14px; color: var(--h-text-dim); margin-top: 3px; }
.help-page .help-cta-text { color: var(--h-text-dim); }

.help-page a.help-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 13px;
    border: none;
    background: var(--h-grad);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 16px -8px var(--h-brand-shadow);
    transition: filter .15s;
}
.help-page a.help-cta-btn:hover { filter: brightness(1.07); }
html.dark .help-page a.help-cta-btn { color: #fff; }

/* ----------------------------------------------------------
   Спец-перебивка глобальных html.dark p/span/div/h* (специфичность
   0,1,2 — html+.dark+element). Двух-классовый селектор .help-page .X
   даёт (0,2,0) и выигрывает по числу классов (2 > 1), поэтому тёплые
   токены не подменяются общим --app-text. Цвета берутся из --h-*,
   которые сами флипаются в тёмной теме.
   ---------------------------------------------------------- */
.help-page .help-title,
.help-page .help-section-title,
.help-page .help-card-q,
.help-page .help-cta-title,
.help-page .help-empty-title { color: var(--h-text); }
.help-page .help-section-icon { color: #fff; }
/* CTA-плитки («Не нашли ответ?» / «Поддержка») — иконка белая на градиенте.
   Без .help-page-префикса проигрывала .help-page span (0,1,1) → тёмный --h-text. */
.help-page .help-cta-icon { color: #fff; }
.help-page .help-empty-text,
.help-page .help-empty-icon { color: var(--h-text-dim); }

/* ---------- Анимация вспышки карточки ---------- */
@keyframes help-faqpop {
    0%   { transform: scale(.985); }
    55%  { transform: scale(1.006); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .help-card.is-flash { animation: none; }
}

/* ---------- Десктоп/планшет: справка без «рамки», единый фон со страницей ----------
   Раньше .help-page была плавающей карточкой (border + radius + shadow + своя
   лавандовая подложка) поверх тёмного фона приложения. Получалось «бесячая рамка»
   и стопка цветовых зон: тёмный сайдбар → тёмная полоса фона → синеватая панель →
   карточки. Делаем панель бесшовной: убираем фон/рамку/тень/боковые поля и отдаём
   ширину обычному центрированному контейнеру (как у остальных страниц). Бренд
   остаётся в карточках, иконках групп и CTA. */
@media (min-width: 821px) {
    .help-page {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 56px;
    }
}

/* ---------- Адаптив ---------- */
@media (max-width: 820px) {
    .help-page {
        /* На мобиле справка идёт во всю ширину экрана — без боковых полей, рамки
           и скруглений, чтобы тексту было максимум места. Отрицательные margin'ы
           выводят панель за 12px-падинг родительского .container до краёв вьюпорта. */
        padding: 24px 0 64px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: -12px;
        margin-right: -12px;
    }
    .help-title { font-size: 27px; }
    /* Контент вне карточек выравниваем по тексту карточек (16px от края),
       сами карточки и лента-чипы идут во всю ширину. */
    .help-head,
    .help-hint { padding-left: 16px; padding-right: 16px; }
    .help-search-wrap { margin-left: 16px; margin-right: 16px; }
    .help-rail { margin-left: 0; margin-right: 0; }
    .help-card { padding-left: 16px; padding-right: 16px; }
    .help-card-head {
        display: block;
        margin-bottom: 14px;
    }
    .help-card-accent { display: none; }
    .help-body {
        flex-direction: column;
        /* align-items базово = flex-start (для desktop: sticky-TOC + main по верху).
           В колоночной раскладке это НЕ растягивает .help-main по ширине, и карточки
           берут max-content (≈586px) → горизонтальный вылет и обрезанный текст.
           На мобиле тянем по ширине контейнера. */
        align-items: stretch;
        gap: 0;
        margin-top: 18px;
    }
    .help-main { width: 100%; }
    .help-nav { display: none; }
    .help-rail { display: block; }
    .help-cta {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 16px;
        padding-right: 16px;
    }
    .help-page a.help-cta-btn {
        width: 100%;
        justify-content: center;
    }
}