/* Контекстная «?»-помощь по разделам (онбординг, Фаза 3).
   Выезжающая справа панель. CSP-friendly: статика здесь, динамики нет. */

.help-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 7000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.help-overlay.open { opacity: 1; visibility: visible; }

.help-drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: 440px; max-width: 92vw;
    background: var(--card-bg, #fff);
    z-index: 7001;
    box-shadow: -10px 0 34px rgba(0,0,0,0.16);
    transform: translateX(100%);
    transition: transform 0.26s ease;
    display: flex; flex-direction: column;
}
.help-drawer.open { transform: translateX(0); }

.help-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.help-head-icon {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #007AFF, #5856d6); color: #fff;
}
.help-title { font-size: 17px; font-weight: 700; flex: 1; color: var(--text-primary, #1d1d1f); }
.help-close {
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--text-secondary, #8a8a8e); border-radius: 8px; padding: 6px 8px; line-height: 1;
}
.help-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary, #1d1d1f); }

.help-body { padding: 18px 20px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.55; color: var(--text-secondary, #3a3a3c); }
.help-body p { margin: 0 0 12px; }
.help-body h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #8a8a8e); margin: 18px 0 8px; font-weight: 700; }
.help-body ul { margin: 0 0 10px; padding-left: 18px; }
.help-body li { margin-bottom: 6px; }
.help-body b, .help-body strong { color: var(--text-primary, #1d1d1f); }
.help-body .help-tip { background: rgba(0,122,255,0.06); border: 1px solid rgba(0,122,255,0.18); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px; color: var(--text-primary, #1d1d1f); }

.help-foot { padding: 14px 20px; border-top: 1px solid rgba(0,0,0,0.07); display: flex; gap: 10px; flex-wrap: wrap; }

/* Кнопка «Помощь» в сайдбаре переиспользует .sidebar-item — доп. стилей не нужно. */