/* ============================================================
   Довідка (FR-506) — теми-акордеони, фільтр за роллю, пошук
   ============================================================ */

.help{max-width:62rem;margin:0 auto var(--sp-8)}

.help__head{margin:var(--sp-6) 0 var(--sp-5)}
.help__head h1{margin:var(--sp-2) 0}
.help__lead{margin:0;max-width:46em;color:var(--muted)}

/* ---- Панель інструментів: ролі + пошук ---- */
.help__tools{display:grid;gap:var(--sp-3);padding:var(--sp-4);background:var(--surface);
             border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);
             /* Шапка сайту теж липка (64px) — інакше панель заїжджає під неї. */
             position:sticky;top:64px;z-index:5}
.help__roles{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.help__search{display:block}
.help__search .field{width:100%}
.help__count{margin:0;font-size:.82rem}

/* ---- Зміст ---- */
.help__toc{display:flex;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;margin:var(--sp-5) 0;
           font-size:.9rem}
.help__toc a{color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--line)}
.help__toc a:hover{color:var(--link);border-bottom-color:currentColor}

/* ---- Розділи ---- */
.help__section{margin:var(--sp-6) 0 0;scroll-margin-top:8rem}
.help__section-title{font-size:1.15rem;margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);
                     border-bottom:1px solid var(--line)}

/* ---- Тема ---- */
.help__topic{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
             margin-bottom:var(--sp-2);scroll-margin-top:9rem;overflow:hidden}
.help__topic[open]{box-shadow:var(--shadow-1)}

.help__q{cursor:pointer;padding:var(--sp-3) var(--sp-4);display:flex;gap:var(--sp-3);
         align-items:center;justify-content:space-between;font-weight:600;list-style:none}
.help__q::-webkit-details-marker{display:none}
.help__q::after{content:"+";font-weight:400;font-size:1.2rem;color:var(--muted);flex:none;
                transition:transform .2s}
.help__topic[open] .help__q::after{content:"−"}
.help__q:hover{background:var(--surface-2)}

.help__tags{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-left:auto}
.help__tag{font-size:.68rem;font-weight:500;padding:var(--sp-05) 7px;border-radius:var(--r-pill);
           background:var(--brand-soft);color:var(--muted);white-space:nowrap}

.help__a{padding:0 var(--sp-4) var(--sp-4)}
.help__a p{margin:0 0 var(--sp-3);max-width:44em}
.help__a p:last-child{margin-bottom:0}
.help__a code{font-family:var(--font-mono,monospace);font-size:.85em;padding:1px 5px;
              background:var(--surface-2);border:1px solid var(--line);border-radius:4px}

/* max-width абзаців тут не діє: інакше пунктирна лінія обривається посеред картки */
.help__related{max-width:none;font-size:.88rem;display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:baseline;
               padding-top:var(--sp-3);border-top:1px dashed var(--line)}

.help__empty{margin:var(--sp-6) 0;padding:var(--sp-5);text-align:center;color:var(--muted);
             background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-sm)}

/* Мітки ролей на вузькому екрані з'їдають заголовок — ховаємо, фільтр лишається */
@media (max-width:640px){
  .help__tags{display:none}
  .help__tools{position:static}
}