/* «Помощь», «Сообщить о проблеме», знакомство, «Должность и подразделение» (components/help-ui.js, pages/help.js, components/org-assign-panel.js). Только токены темы. */
.hp-page { max-width: 860px; margin: 0 auto; padding: var(--space-6, 24px) var(--space-6, 24px) var(--space-10, 48px); display: flex; flex-direction: column; gap: 16px; }
.hp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.hp-top__a { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.hp-lead { margin: 0; max-width: 70ch; font-size: var(--text-sm, 13px); line-height: 1.55; color: var(--text-muted); }
.hp-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hp-f > span { font-size: 12px; color: var(--text-muted); }
.hp-search { max-width: 420px; }
.hp-hint { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.hp-err { margin: 0; font-size: var(--text-sm, 13px); color: var(--status-danger); }
.hp-g { display: flex; flex-direction: column; gap: 8px; }
.hp-g__t { margin: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.hp-t { border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px); background: var(--surface-primary); }
.hp-t summary { padding: 12px 14px; cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-t summary::-webkit-details-marker { display: none; }
.hp-t summary::after { content: '▾'; color: var(--text-muted); transition: transform .15s; }
.hp-t[open] summary::after { transform: rotate(180deg); }
.hp-t[open] { padding-bottom: 14px; }
.hp-t > .btn { margin: 4px 14px 0; }
.hp-steps { margin: 0 14px 12px 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm, 13px); line-height: 1.55; color: var(--text-secondary, var(--text-primary)); }
.hp-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--text-sm, 13px); color: var(--text-muted); }
.hp-keys kbd { display: inline-block; min-width: 24px; padding: 1px 7px; text-align: center; border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: 6px; font: inherit; font-weight: 600; color: var(--text-primary); background: var(--surface-elevated); }
.hp-empty { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px dashed var(--border-default); border-radius: var(--radius-lg, 14px); color: var(--text-muted); }
.hp-empty b { color: var(--text-primary); }
.hp-form { display: flex; flex-direction: column; gap: 12px; }
.hp-chk { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm, 13px); line-height: 1.5; color: var(--text-secondary, var(--text-primary)); cursor: pointer; }
.hp-chk input { margin-top: 3px; }

/* Знакомство */
.hp-tour { display: flex; flex-direction: column; gap: 10px; }
.hp-tour__n { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hp-tour__t { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.hp-tour__x { margin: 0; font-size: var(--text-sm, 13px); line-height: 1.6; color: var(--text-secondary, var(--text-primary)); }
.hp-tour__dots { display: flex; gap: 6px; padding-top: 4px; }
.hp-tour__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); }
.hp-tour__dots i.on { background: var(--accent-primary); }

/* Должность и подразделение в карточке */
.hp-oa { display: flex; flex-direction: column; gap: 12px; padding: var(--space-5, 20px); }
.hp-oa__h { font-size: var(--text-base, 15px); font-weight: 600; }
.hp-oa__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; }
.hp-oa__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
@media (max-width: 767px) { .hp-page { padding: var(--space-4, 16px); } .hp-oa { padding: var(--space-4, 16px); } }
@media (prefers-reduced-motion: reduce) { .hp-t summary::after { transition: none; } }