/* settings panel — окно настроек.
   Обёртку .dock-panel[data-panel="settings"] создаёт сервер: она несёт
   размеры окна, которые забирает док. Ширину задаёт --dock-panel-width,
   высоту док измеряет по содержимому. Слои (список, подтверждение,
   форма) лежат в потоке и сменяют друг друга, поэтому показанный слой
   и определяет размер окна. Раскладку строк берут на себя модули
   (slider, tb, text, dd), здесь только их расстановка. */

.dock-panel[data-panel="settings"] {
    --dock-panel-width: 400px;
    --dock-panel-pad: 20px;

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--dock-panel-pad);
}

/* Форма обращения шире: подобрано под три снимка в зоне. */
.dock-panel[data-panel="settings"].is-report {
    --dock-panel-width: 452px;
}

/* ===== Список действий ===== */

.settings-panel__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Вид гостя =====

   У гостя нет учётной записи, поэтому в списке остаются только тема
   и обращение о проблеме: почта и тег у него нет, а выход, экспорт и
   удаление аккаунта не о чем делать.

   Панель при этом одна на всех — вошедшему показывается весь список,
   и ни код окна, ни разметка об этом не знают. Скрытые строки и так
   не участвуют в промежутках: у display: none места нет. */

.is-guest .settings-panel__list [data-inputfield="tag"],
.is-guest .settings-panel__list [data-inputfield="email"],
.is-guest .settings-panel__list .tb:has([data-tb-action="logout"]),
.is-guest .settings-panel__list .tb:has([data-tb-action="export"]),
.is-guest .settings-panel__list .tb:has([data-tb-action="delete"]) {
    display: none;
}

/* ===== Подтверждение удаления ===== */

.settings-panel__confirm,
.settings-panel__change,
.settings-panel__code {
    display: none;
    flex-direction: column;
    gap: 12px;
}

/* Кнопка предупреждения о смене: та же форма, но свой цвет.
   Акцент вместо опасного — действие обратимо. */
.settings-panel__confirm-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* Пустая строка между предупреждением и вопросом. */
.settings-panel__confirm-text--question {
    margin-top: 15px;
}

/* Наведение — краской, а не фильтром. Опасная берёт готовый
   --color-danger-hover; акцентную свести с белым бессмысленно (в
   стандартной теме акцент и так почти белый), поэтому она темнеет
   на 12% — так наведение видно и на белом, и на цвете ОС. */
/* Фокус — обводка акцентом: та же краска, что у других обводок сайта. */
/* ===== Форма обращения ===== */

.settings-panel__report {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.settings-panel__report-actions {
    display: flex;
    justify-content: flex-end;
}

/* ===== Режимы окна =====
   Показан ровно один слой: он и задаёт высоту окна. */

.dock-panel[data-panel="settings"].is-confirm .settings-panel__list {
    display: none;
}

.dock-panel[data-panel="settings"].is-confirm .settings-panel__confirm {
    display: flex;
}

.dock-panel[data-panel="settings"].is-change-tag .settings-panel__list,
.dock-panel[data-panel="settings"].is-change-email .settings-panel__list {
    display: none;
}

/* Предупреждение показываем по полю, которое правят: текст у каждого
   свой, лежит в разметке и в скрипт не попадает. */
.dock-panel[data-panel="settings"].is-change-tag .settings-panel__change[data-change-for="tag"],
.dock-panel[data-panel="settings"].is-change-email .settings-panel__change[data-change-for="email"] {
    display: flex;
}

.dock-panel[data-panel="settings"].is-code .settings-panel__list {
    display: none;
}

/* Ряд ячеек сам знает свою ширину (width: max-content), поэтому внутри
   окна он встаёт по центру — как и текст над ним. */
.dock-panel[data-panel="settings"].is-code .settings-panel__code {
    display: flex;
}

.dock-panel[data-panel="settings"].is-report .settings-panel__list,
.dock-panel[data-panel="settings"].is-report .settings-panel__confirm,
.dock-panel[data-panel="settings"].is-report .settings-panel__change,
.dock-panel[data-panel="settings"].is-report .settings-panel__code {
    display: none;
}

.dock-panel[data-panel="settings"].is-report .settings-panel__report {
    display: flex;
}


.settings-panel [data-inputfield="tag"] .inputfield__prefix {
    color: var(--color-accent);
}

[data-delete-status], [data-delete-request-status] { color:var(--color-danger); font-size:12px; margin:0; text-align:center; }
[data-delete-status]:empty, [data-delete-request-status]:empty { display:none; }

[data-account-status] { color:var(--color-danger); font-size:12px; margin:0; }
[data-account-status]:empty { display:none; }

.settings-panel__export { display:none; flex-direction:column; gap:16px; }
.dock-panel[data-panel="settings"].is-export .settings-panel__list { display:none; }
.dock-panel[data-panel="settings"].is-export .settings-panel__export { display:flex; }