/* Обучение по экрану (msg 22404, help.js): круглая «?» в шапке рядом с темой и выезжающая панель статьи.
   Панель - общий dialog.drawer (home.css: размеры, анимация, телефон снизу), здесь только её содержимое.
   Цвета только из переменных темы app.css (светлая и тёмная без своей палитры); инлайн-стилей нет: CSP style-src 'self'.
   Цвет текста задаём самим абзацам: app.css красит любой <p> в --muted. */
.help-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;padding:0;border:1.6px solid currentColor;
  border-radius:50%;background:transparent;color:var(--muted-strong);cursor:pointer}
.help-btn i{font:700 13px/1 UISans,system-ui,sans-serif;font-style:normal;letter-spacing:0}
.help-btn:hover,.help-btn[aria-expanded=true]{color:var(--green);background:var(--green-soft)}
.help-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

dialog.help-drawer{width:min(540px,calc(100vw - 20px))}
.help-top{align-items:flex-start}
.help-top h2{font-size:18px;line-height:1.3}
.help-top h2:focus{outline:none}
.help-top p{font-size:12px;color:var(--muted-strong)}
.help-eyebrow{display:block;margin:0 0 4px;font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--green)}
.help-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:2px 20px 18px}
.help-body p.help-lead{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--text)}
.help-body p.help-note{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--text)}
.help-sec{margin:0 0 18px}
.help-sec h3,.help-group{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-strong)}
.help-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.help-list li{font-size:13px;line-height:1.55;color:var(--text)}
.help-list b{font-weight:600}
.help-tips li{padding-left:12px;border-left:3px solid var(--green-soft)}
.help-case{margin:0 0 8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.help-case h4{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--text)}
.help-case ol,.help-steps{margin:0;padding-left:20px;display:grid;gap:4px;font-size:13px;line-height:1.55;color:var(--text)}
.help-case li::marker,.help-steps li::marker{color:var(--green);font-weight:600}
.help-steps b{font-weight:600}
.help-links{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:12px}
.help-links a,.help-steps a,.help-note a{color:var(--green);text-decoration:underline}
.help-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.help-tabs button{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:12px;line-height:1.4;cursor:pointer}
.help-tabs button:hover{border-color:var(--green)}
.help-tabs button[aria-current=true]{background:var(--green-soft);border-color:var(--green);color:var(--green);font-weight:600}
.help-more{margin:0 0 14px}
.help-more summary{cursor:pointer;color:var(--green);font-size:13px;font-weight:600;width:fit-content}
.help-more[open] summary{margin-bottom:8px}
.help-more .help-tabs{margin:0}
.help-howto{padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.help-howto summary{cursor:pointer;color:var(--green);font-weight:600;font-size:13px}
.help-howto[open] summary{margin-bottom:8px}
.help-howto-body{display:grid;gap:10px}
.help-howto-body h4{margin:0 0 4px;font-size:12px;color:var(--text)}
.help-howto-body ul{margin:0;padding-left:18px}
.help-howto-body li{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--text)}
.help-search{display:grid;gap:4px;margin:0 0 14px;font-size:12px;color:var(--muted-strong)}
.help-search input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px}
.help-search input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.help-group{margin-top:14px}
.help-index{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.help-index button{display:grid;gap:2px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--text);text-align:left;cursor:pointer}
.help-index button:hover{border-color:var(--green)}
.help-index b{font-size:13px;font-weight:600}
.help-index small{font-size:12px;line-height:1.45;color:var(--muted-strong);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.help-foot .primary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:720px){
  dialog.help-drawer{width:100vw}          /* снизу во всю ширину, как dialog.drawer (home.css); иначе справа щель */
  .help-btn{width:22px;height:22px}
  .help-btn i{font-size:12px}
  .help-top h2{font-size:16px}
  .help-body{padding:2px 16px 16px}
}