/* web/static/help.css
 * Раздел «Помощь» — содержание по макету Claude Design
 * (design_handoff_company_help), внешний вид — по прототипу дизайнера
 * 18.10.2026 (design/prototypes/login-variants/help-preview.css), значения
 * сняты с отрисованной страницы прототипа.
 *
 * ⚠️ Только токены из tokens.css: обе темы сразу. Поле и кнопки внутри
 * страницы — --bg-card, карточки — --bg-sidebar, как в «Профиле».
 */

.help-root {
    width: 100%;
    max-width: var(--help-page-width);
    margin-inline: auto;
    box-sizing: border-box;
    padding: var(--help-page-padding);
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-size: var(--font-label);
    line-height: var(--help-body-leading);
}

/* ---------------------------------------------------------------- шапка */

.help-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.help-h1 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-page);
    font-weight: 500;
    line-height: var(--help-title-leading);
    color: var(--primary);
}

.help-back {
    flex-shrink: 0;
    width: var(--control-height);
    height: var(--control-height);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.help-back:hover { background: var(--bg-card); color: var(--primary); }

.help-intro { margin: var(--space-2) 0 0; font-size: var(--font-caption); color: var(--text-secondary); }

/* ---------------------------------------------------------------- поиск */

.help-search-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: var(--help-copy-width);
    margin: var(--space-4) 0;
    font-size: var(--font-label);
}

.help-search { position: relative; }

.help-search > svg {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.help-search-input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--control-compact);
    padding: var(--space-3) var(--control-height) var(--space-3) var(--space-7);
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: var(--font-label);
    outline: none;
}

.help-search-input::placeholder { color: var(--text-secondary); }
.help-search-input::-webkit-search-cancel-button { display: none; }
.help-search-input:focus-visible { outline: none; box-shadow: none; }

.help-search-clear {
    position: absolute;
    right: var(--help-tight-gap);
    top: 50%;
    transform: translateY(-50%);
    width: var(--control-compact);
    height: var(--control-compact);
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
}

/* ------------------------------------------------------------------ темы */

.help-categories {
    display: flex;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    overflow-x: auto;
    scrollbar-width: thin;
}

.help-category {
    flex-shrink: 0;
    min-height: var(--control-compact);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: var(--font-label);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motion), color var(--motion);
}

.help-category:hover { color: var(--primary); }
.help-category[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.help-category:focus-visible, .help-back:focus-visible, .help-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------------------------------------------------- состояние аккаунта */

.help-status {
    margin-block: var(--space-3) var(--space-4);
    border-radius: var(--ui-radius);
    background: var(--bg-sidebar);
    overflow: hidden;
}

.help-status.has-problems .help-status-count { color: var(--warning-text); }
.help-status-ok { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.help-status-lead { font-weight: 700; }
.help-status-systems { margin-left: auto; font-size: var(--font-caption); color: var(--text-secondary); }

.help-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
}

.help-status-count { margin-left: auto; font-size: var(--font-caption); color: var(--text-secondary); font-weight: 600; }
.help-status-head::-webkit-details-marker { display: none; }
.help-status-head .help-chevron { width: var(--icon-size); height: var(--icon-size); }
.help-status[open] .help-status-head .help-chevron { transform: rotate(180deg); }
.help-status[open] .help-status-head { border-bottom: var(--hairline) solid var(--border); }
.help-status-calm { margin: 0; padding: var(--space-3); color: var(--text-secondary); }
.help-status-head:focus-visible { outline: none; color: var(--primary); }

.help-problem { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.help-problem + .help-problem { border-top: var(--hairline) solid var(--border); }
.help-problem-text { flex: 1 1 var(--help-problem-width); min-width: 0; }
.help-problem-text .help-status-lead { overflow-wrap: anywhere; }
.help-problem-rest { color: var(--text-secondary); }
.help-problem > .help-btn, .help-problem > .help-owner-only { margin-left: auto; }

.help-dot { width: var(--help-dot-size); height: var(--help-dot-size); flex-shrink: 0; border-radius: 50%; }
.help-dot.is-ok { background: var(--success); box-shadow: 0 0 0 var(--help-tight-gap) var(--success-soft); }
.help-dot.is-warn { background: var(--warning-text); box-shadow: 0 0 0 var(--help-tight-gap) var(--warning-soft); }
.help-dot.is-error { background: var(--error); box-shadow: 0 0 0 var(--help-tight-gap) var(--error-soft); }

.help-overline { font-size: var(--font-caption); font-weight: 700; color: var(--text-secondary); }
.help-owner-only { font-size: var(--font-caption); color: var(--text-secondary); }
.help-muted { font-size: var(--font-label); color: var(--text-secondary); }

/* --------------------------------------------------------------- кнопки */

.help-btn {
    min-height: var(--control-compact);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: var(--font-label);
    white-space: nowrap;
    cursor: pointer;
}

.help-btn:hover { color: var(--primary); }
.help-btn.is-outline { color: var(--primary); }
.help-btn.is-primary { background: var(--primary); color: var(--on-primary); }
.help-btn.is-primary:hover { background: var(--primary-light); }
.help-btn.is-small { min-height: var(--row-compact); font-size: var(--font-caption); }
.help-btn.is-large { min-height: var(--control-height); padding: var(--space-2) var(--space-3); }

/* ---------------------------------------------------------------- разделы */

.help-body { max-width: var(--help-content-width); min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.help-results-line { margin-top: var(--space-3); font-size: var(--font-caption); color: var(--text-secondary); }
.help-results-line:empty { display: none; }

.help-section { scroll-margin-top: var(--help-scroll-offset); }

.help-sec-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-3);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    box-sizing: border-box;
}

button.help-sec-head { cursor: pointer; }
.help-sec-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--help-tight-gap); }
.help-sec-title { color: var(--primary); margin: 0; font-size: var(--font-base); font-weight: 700; }
.is-other .help-sec-title { color: var(--text-secondary); }
.help-sec-sub { font-size: var(--font-caption); color: var(--text-secondary); }
.help-chevron { flex-shrink: 0; color: var(--text-secondary); transition: transform var(--motion); }
[aria-expanded="true"] > .help-chevron { transform: rotate(180deg); }
.help-other-label { margin-top: var(--space-5); }

/* Вопрос — строка с линией снизу; открытый и наведённый — на плашке. */
.help-q { border-bottom: var(--hairline) solid var(--border); scroll-margin-top: var(--help-scroll-offset); }

.help-q-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: var(--space-3);
    box-sizing: border-box;
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    font-size: var(--font-base);
    font-weight: 700;
    line-height: var(--text-heading-lh);
    cursor: pointer;
}

.help-q-head:hover, .help-q.is-open .help-q-head { background: var(--bg-card); color: var(--primary); }
.help-q-head:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.help-q.is-flash .help-q-head { color: var(--primary); background: var(--bg-card); }
.help-q-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--help-tight-gap); }
.help-q-section { font-size: var(--font-caption); font-weight: 400; color: var(--text-secondary); }

.help-q-flash {
    flex-shrink: 0;
    padding: 2px var(--space-2);
    border-radius: var(--ui-radius-small);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--font-caption);
    font-weight: 600;
}

/* ----------------------------------------------------------------- ответ */

.help-answer {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--font-label);
    color: var(--text);
    overflow-wrap: break-word;
}

.help-p { margin: 0; }
.help-strong { font-weight: 700; }

.help-path {
    padding: var(--hairline) var(--space-2);
    border-radius: var(--ui-radius-small);
    background: var(--bg-card);
    color: var(--text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.help-ul, .help-ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.help-ul { gap: var(--space-1); }
.help-ol { gap: var(--space-2); counter-reset: help-step; }
.help-ul li, .help-ol li { position: relative; padding-left: var(--space-4); }

/* ⚠️ Маркер — отдельным слоем, а не flex-строкой: во flex каждый **жирный**
   кусок становился своей колонкой и рвался посередине слова. */
.help-ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--space-2);
    width: var(--help-tight-gap);
    height: var(--help-tight-gap);
    border-radius: 50%;
    background: var(--primary);
}

.help-ol li { padding-left: var(--row-compact); counter-increment: help-step; }

.help-ol li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: var(--primary);
    font-size: var(--font-caption);
    font-weight: 700;
    display: grid;
    place-items: center;
}

.help-examples { display: flex; flex-direction: column; gap: var(--space-1); }

.help-example {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border-radius: var(--ui-radius);
    background: var(--bg-sidebar);
}

.help-example-text { flex: 1 1 var(--help-problem-width); }
.help-example .help-btn { margin-left: auto; }

.help-note { padding: var(--space-2) var(--space-3); border-radius: var(--ui-radius); background: var(--warning-soft); }
.help-note-lead { font-weight: 700; color: var(--warning-text); }

.help-table-scroll { overflow-x: auto; border-radius: var(--ui-radius); background: var(--bg-sidebar); }

.help-table {
    min-width: var(--help-copy-width);
    display: grid;
    grid-template-columns: minmax(var(--help-table-label), 1.4fr) repeat(2, minmax(var(--help-table-cell), 1fr));
}

.help-cell { padding: var(--space-2) var(--space-3); border-top: var(--hairline) solid var(--border); color: var(--text-secondary); }
.help-cell.is-head { border-top: 0; }
.help-cell.is-head, .help-cell.is-label { color: var(--text); font-weight: 700; }

.help-answer-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--hairline) solid var(--border);
    font-size: var(--font-caption);
    color: var(--text-secondary);
}

.help-pill {
    min-height: var(--row-compact);
    padding: var(--help-tight-gap) var(--space-3);
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: var(--font-caption);
    cursor: pointer;
}

.help-pill:hover { color: var(--primary); }

.help-link {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--row-compact);
    padding: var(--help-tight-gap) var(--space-2);
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-caption);
    cursor: pointer;
}

.help-link:hover { color: var(--primary); }

/* ------------------------------------------------------------ низ страницы */

.help-empty {
    margin-top: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--ui-radius);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.help-empty-title { font-size: var(--font-lead); font-weight: 700; }

.help-contact {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--ui-radius);
    background: var(--bg-sidebar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

.help-contact-text { flex: 1 1 var(--help-problem-width); min-width: 0; display: flex; flex-direction: column; gap: var(--help-tight-gap); }
.help-contact-title { color: var(--primary); font-size: var(--font-base); font-weight: 700; }

.help-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--font-caption);
    color: var(--text-secondary);
}

.help-footer-id { display: flex; align-items: center; gap: var(--space-1); }
.help-mono { font-family: ui-monospace, Menlo, monospace; }

.help-icon-btn {
    width: var(--row-compact);
    height: var(--row-compact);
    border: 0;
    border-radius: var(--ui-radius-small);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.help-icon-btn:hover { background: var(--bg-card); }
.help-footer-link { color: var(--text-secondary); }

@media (max-width: 768px) {
    .help-root { padding: var(--space-4); }
    .help-search-label { max-width: none; }
    .help-category { font-size: var(--font-caption); }
    .help-problem > .help-btn, .help-problem > .help-owner-only { margin-left: calc(var(--help-dot-size) + var(--space-3)); }
    .help-q { scroll-margin-top: var(--help-scroll-offset); }
}

@media (prefers-reduced-motion: reduce) {
    .help-category, .help-chevron { transition: none; }
}

/* display у элементов выше перебивает атрибут hidden — возвращаем ему силу. */
.help-root [hidden] { display: none !important; }

/* Иерархия шапки — как у Компании и Отчётов; темы в общей центральной колонке. */
.help-navigation { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--border); margin-bottom: var(--space-4); }
.help-navigation .help-categories { flex: 1; min-width: 0; padding-bottom: 0; }
.help-navigation .help-search-label { flex: 0 1 var(--help-copy-width); min-width: 0; margin: 0; }
.help-search-caption { position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.help-body { width: 100%; margin-inline: auto; }
@media (min-width: 769px) {
    .help-root { padding-top: var(--help-title-inset); }
    .help-head { min-height: var(--help-title-row); }
}
@media (max-width: 768px) {
    .help-navigation { flex-direction: column; align-items: stretch; }
    .help-navigation .help-search-label { flex-basis: auto; max-width: none; }
    .help-intro { margin-top: 0; }
}

.help-copy-dialog { width: var(--help-copy-width); max-width: calc(100vw - var(--space-4) * 2); box-sizing: border-box; padding: var(--space-4); border: var(--hairline) solid var(--border); border-radius: var(--ui-radius); background: var(--bg-main); color: var(--text); font-family: var(--font-sans); }
.help-copy-dialog::backdrop { background: var(--help-copy-backdrop); }
.help-copy-title { margin: 0 0 var(--space-3); font-size: var(--font-lead); color: var(--primary); }
.help-copy-hint { margin: 0 0 var(--space-3); font-size: var(--font-label); }
.help-copy-field { display: block; width: 100%; box-sizing: border-box; margin-bottom: var(--space-3); padding: var(--space-3); background: var(--bg-card); color: var(--text); border: 0; border-radius: var(--ui-radius); font: inherit; outline: none; }