/* Помощь: список инструкций по ролям и пошаговые страницы */

.help-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
.help-list { list-style: none; padding: 0; margin: 0; }
.help-list li { border-bottom: 1px solid var(--line); }
.help-list a, .help-list b { display: block; padding: 12px 0; }
.help-list a { font-weight: 400; text-decoration: none; }
.help-list a:hover { text-decoration: underline; }
.help-contact { margin-top: 40px; max-width: 720px; }
.help-start { margin-bottom: 56px; }
.icard-plain { height: 100%; }
.help-sec { border: 1px solid var(--line); border-top: 3px solid var(--blue); padding: 20px 22px 8px; }
.help-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.help-sec-h h2 { margin: 0; font-size: 24px; }
.help-list-num { counter-reset: hl; }
.help-list-num li { counter-increment: hl; }
.help-list-num a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.help-list-num a::before { content: counter(hl); font: 600 15px/1.5 var(--serif); color: var(--blue); }
.help-list-num li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .help-sections { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Одна колонка: шаги читаются подряд, список соседних инструкций — под ними */
.help-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 760px; }
.help-guide { max-width: 720px; }
.help-guide .lead { font-size: 18px; margin: 0 0 8px; max-width: 65ch; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps > li { padding: 18px 22px 20px; border: 1px solid var(--line); border-left: 4px solid var(--blue); background: var(--paper); }
.steps h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 8px; }
.steps h2 span { display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); font-variant-numeric: lining-nums; }
.steps > li:last-child { border-left-color: var(--ok); }
@media (max-width: 600px) { .steps > li { padding: 14px 14px 16px; } }
.steps p { margin: 0; max-width: 65ch; }
.steps p + p, .steps p + ul, .steps ul + p { margin-top: 10px; }
.steps ul { margin: 10px 0 0; padding-left: 20px; max-width: 65ch; }
.steps li li + li { margin-top: 6px; }
.help-note { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid #d99a1e; background: #fdf8ee; color: var(--ink2); font-size: 15px; max-width: none; }

.help-pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 32px; }
.help-pager a { font-weight: 400; max-width: 46%; text-decoration: none; }
.help-pager a:hover { text-decoration: underline; }
.help-pager a span { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.help-pager .next { text-align: right; margin-left: auto; }

.help-aside h2 { font-size: 20px; margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--line-strong); }
.help-aside .help-list { font-size: 15px; margin-bottom: 16px; }
.help-aside .help-list b { color: var(--blue); }

@media (max-width: 900px) {
  .help-page { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .help-pager { flex-direction: column; gap: 14px; }
  .help-pager a { max-width: none; }
  .help-pager .next { text-align: left; margin-left: 0; }
}

/* Печать и PDF-памятка: только шаги */
@media print {
  .topbar, .footer, .cookie-bar, .help-aside, .help-pager, .chevrons { display: none !important; }
  .page-head { background: none; color: var(--ink); }
  .page-head .container { padding: 0 0 8px; }
  .page-head p, .page-head .crumbs, .page-head .kicker { display: none; }
  .container.section { padding: 0; }
  .steps > li { break-inside: avoid; }
}

/* Видеогайды: два ролика с оглавлением на /help/ и кнопка «Смотреть в ролике» в статье */
.help-videos { margin-bottom: 56px; }
.help-videos-sub { margin: 0 0 20px; max-width: 65ch; }
.hv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.hv h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.hv-len { font: 600 14px/1 var(--font); color: var(--ink2); font-variant-numeric: tabular-nums; }
.hv-player { position: relative; aspect-ratio: 16 / 9; background: var(--mist); }
.hv-player video { display: block; width: 100%; height: 100%; background: #000; }
.hv-toc { list-style: none; padding: 0; margin: 12px 0 0; border-top: 2px solid var(--line-strong); font-size: 15px; }
.hv-toc li { border-bottom: 1px solid var(--line); }
.hv-toc a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 9px 0; color: var(--ink); text-decoration: none; font-weight: 400; }
.hv-toc a:hover { color: var(--blue); }
.hv-toc a[aria-current] { color: var(--blue); font-weight: 600; }
.hv-toc a[aria-current] .hv-time::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--red); margin-right: 6px; vertical-align: 1px; }
.hv-time { color: var(--ink2); font-variant-numeric: tabular-nums; }
.hv-inline { margin: 4px 0 24px; }
.hv-inline + .hv-inline { margin-top: -12px; }  /* короткий ролик и глава большого — одной парой */
.hv-inline .hv-player { margin-top: 12px; }
.hv-inline .hv-player[hidden] { display: none; }
.hv-note { margin: 8px 0 0; }
.hv-open { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 18px 8px 10px; border: 2px solid var(--ink);
  color: var(--ink); text-decoration: none; font-weight: 400; max-width: 100%; }
.hv-open:hover { color: var(--ink); border-color: var(--blue); }
.hv-open:hover .hv-play { background: var(--brand-dark); }
.hv-play { flex: none; width: 36px; height: 36px; padding: 9px 8px 9px 10px; background: var(--brand); color: #fff; }
.hv-open b { display: block; font-weight: 600; }
.hv-open-sub { display: block; font-size: 14px; color: var(--ink2); }
@media (max-width: 900px) { .hv-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .help-videos { margin-bottom: 40px; } }
@media print { .help-videos, .hv-inline { display: none !important; } }

/* ---------- Тёмная тема (data-theme="dark", см. app.css): светлые подложки плашек — тёмными оттенками ---------- */
[data-theme="dark"] .help-note { background: rgba(240, 169, 74, .08); }