/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Подэкран «Настройки» модуля (#modules-<id>-settings): форма полей схемы (modules-settings-form.js) и блок «Ключи» (modules-settings-keys.js).
   Вид — по образцу окна «Новая задача»: узкая центрированная колонка (--modal-w), белые плашки .ui-card с рамкой-тенью, поля ui field(),
   главная кнопка «Сохранить» тёмная, статус ключа — точка и серое слово. Шапка (.am-head, .am-kicker; «назад» — back.css) живёт в modules.css.
   Подключён в index.html после modules-reels.css; значения — только из tokens.css, размеры в rem. Классы am-setpage, am-set*, am-field*, am-keysec, am-key*.
   Общие правила: min-width: 0 у всех grid/flex-детей, длинные url и подсказки переносятся, касания не меньше --size-touch-min. */

/* ---------- Колонка и секции ---------- */
.am-setpage { width: 100%; max-width: var(--modal-w); margin-inline: auto; min-width: 0; box-sizing: border-box; }
.am-setpage > * { min-width: 0; }
.am-set__body { display: grid; gap: var(--tile-gap); align-content: start; min-width: 0; }
.am-set__keys { display: contents; }
.am-set, .am-keysec { display: grid; gap: var(--space-5); align-content: start; min-width: 0; max-width: 100%; box-sizing: border-box; }
.am-set[hidden], .am-keysec[hidden] { display: none; }
.am-set > *, .am-keysec > *, .am-keysec .am-keys { min-width: 0; }
.am-set > .ui-card__t, .am-keysec .ui-card__t { margin: 0; }
.am-keysec .am-keys { display: grid; gap: var(--space-5); }

/* Загрузка и пустое состояние: та же белая плашка, серый текст. Повтор после ошибки — без вытягивания на всю ширину. */
.am-set__state { box-sizing: border-box; }
.am-set__msg { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.am-set__retry { min-height: var(--size-touch-min); }

/* ---------- Поля формы: строки в одной плашке, разделены линией 1 px ---------- */
.am-set__list { display: grid; gap: 0; min-width: 0; }
.am-set .am-field {
  display: grid; gap: var(--space-3); align-content: start; min-width: 0; max-width: 100%; box-sizing: border-box;
  padding-block: var(--space-5);
}
.am-set .am-field:first-child { padding-top: 0; }
.am-set .am-field:last-child { padding-bottom: 0; }
.am-set .am-field + .am-field { border-top: 1px solid var(--color-line); }
.am-field > * { min-width: 0; max-width: 100%; }
.am-field .ui-field__l { overflow-wrap: anywhere; }
.am-field .ui-field__h { overflow-wrap: anywhere; }

/* Нативные контролы внутри field(): select, цвет и ползунок не ломают рамку ввода. */
.am-field .ui-field select { cursor: pointer; text-overflow: ellipsis; }
.am-field .ui-field input[type="color"] { width: calc(var(--size-touch-min) * 2); max-width: 100%; justify-self: start; padding: var(--space-1) var(--space-2); cursor: pointer; }
.am-field .ui-field input[type="range"] {
  min-height: var(--size-touch-min); padding: 0; background: transparent; box-shadow: none; accent-color: var(--color-acc); cursor: pointer;
}
.am-field .ui-field input[type="range"]:focus-visible { outline-offset: var(--size-focus-offset); }

/* Диапазон: ползунок и значение в одной строке, значение не сжимается. */
.am-field__range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-width: 0; }
.am-field__out { min-width: 2.5rem; text-align: end; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-num); font-variant-numeric: tabular-nums; }

/* Мультивыбор: fieldset без собственной минимальной ширины, варианты сеткой (3 колонки в 760px, на телефоне 1–2), строка варианта — зона касания. */
.am-field__set { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; }
.am-field__set > legend { padding: 0; margin-bottom: var(--space-1); }
.am-field__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-1) var(--space-2); min-width: 0; }
.am-field__opt {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--size-touch-min); padding-inline: var(--space-3);
  color: var(--color-ink); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.am-field__opt:hover { background: var(--surface-inner-hover); }
.am-field__opt input[type="checkbox"], .am-field__opt input[type="radio"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-acc); cursor: pointer; }
.am-field__opt input:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* Форма: разделы по group, «Дополнительно», одна кнопка «Сохранить» внизу. Поля внутри раздела — строки через линию, как в плашке выше. */
.am-form { display: grid; gap: var(--space-6); align-content: start; width: 100%; max-width: 47.5rem; min-width: 0; box-sizing: border-box; }
.am-set__sec { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.am-set__sec > .am-set__h, .am-set__advbody > * { min-width: 0; }
.am-set .am-set__h { margin: 0; overflow-wrap: anywhere; }
.am-set__sec > .am-set__h + .am-field { padding-top: 0; }
.am-set__adv { min-width: 0; border: 1px solid var(--color-line2); border-radius: var(--inner-radius); background: transparent; }
.am-set__sum {
  display: flex; align-items: center; min-height: var(--size-touch-min); padding-inline: var(--space-4); cursor: pointer; color: var(--color-ink);
  font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans);
}
.am-set__sum:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.am-set__advbody { display: grid; gap: 0; padding: var(--space-4); min-width: 0; }
.am-set .am-hint { padding: var(--space-4); }

/* Кнопка «Сохранить» (тёмная primary) и сообщение результата в одной строке; сообщение переносится под кнопку. */
.am-set__acts, .am-key__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.am-field .btn, .am-key .btn, .am-set__acts .btn { min-height: var(--size-touch-min); max-width: 100%; white-space: normal; text-align: center; }
.am-res { flex: 1 1 10rem; min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.am-res:empty { display: none; }
.am-res[data-tone="ok"] { color: var(--color-ok-text); }
.am-res[data-tone="warn"] { color: var(--color-warn-text); }
.am-res[data-tone="danger"] { color: var(--color-danger-text); }

/* ---------- Группы полей: «Основное» и «Расширенные» (details), одна кнопка «Сохранить» на форму ---------- */
.am-grp { display: grid; gap: 0; min-width: 0; max-width: 100%; box-sizing: border-box; }
.am-grp + .am-grp { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.am-grp__t { margin: 0 0 var(--space-4); color: var(--color-ink); font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.am-grp__sum {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; min-height: var(--size-touch-min);
  color: var(--color-ink); cursor: pointer; list-style: none; border-radius: var(--radius-sm);
  font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.am-grp__sum::-webkit-details-marker { display: none; }
.am-grp__sum::after { content: '›'; flex: none; color: var(--color-ink3); transition: transform var(--duration-fast) var(--ease-out); }
.am-grp[open] > .am-grp__sum::after { transform: rotate(90deg); }
.am-grp__sum:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.am-set .am-grp__t + .am-field { padding-top: 0; }
.am-grp__body { display: grid; gap: 0; min-width: 0; margin-top: var(--space-3); }
.am-set__foot { margin-top: var(--space-5); }
.am-set__foot .btn { min-height: var(--size-touch-min); max-width: 100%; white-space: normal; text-align: center; }
.am-set__foot .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .am-grp__sum::after { transition: none; } }

/* ---------- Блок «Ключи»: строки списка разделены линией, статус — точка и серое слово ---------- */
.am-keysec .am-keylist { gap: 0; min-width: 0; }
.am-keysec .am-key { display: grid; gap: var(--space-4); align-content: start; min-width: 0; max-width: 100%; box-sizing: border-box; padding-block: var(--space-5); }
.am-keysec .am-key:first-child { padding-top: 0; }
.am-keysec .am-key:last-child { padding-bottom: 0; }
/* Заголовок ключа: название, статус и пометки переносятся, а не выталкивают строку за экран. */
/* Селектор с .am-keysec .am-key — чтобы перебить nowrap из modules.css (.am-key .am-key__h). */
.am-keysec .am-key .am-key__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); min-width: 0; }
.am-key__t { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; color: var(--color-ink); font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.am-key__st { flex: none; max-width: 100%; }
.am-key__st .ui-status { white-space: normal; }
.am-key__tag { flex: none; max-width: 100%; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

.am-key__help { display: grid; gap: var(--space-3); min-width: 0; justify-items: start; }
.am-key__cap { margin: 0; color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.am-key__steps { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: var(--space-6); list-style: decimal; min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.am-key__about { margin: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.am-key__steps li { min-width: 0; overflow-wrap: anywhere; }
.am-key__help a.btn { max-width: 100%; overflow-wrap: anywhere; }

/* Ввод ключа и кнопки: столбцом, ряд кнопок и сообщение — под полем. */
.am-key__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.am-key__form > * { min-width: 0; }

/* ---------- Телефон ---------- */
@media (max-width: 30rem) {
  .am-field__opts { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .am-set__sum { padding-inline: var(--space-3); }
  .am-set__advbody { padding: var(--space-3); }
  .am-set__acts, .am-key__acts { flex-direction: column; align-items: stretch; }
  .am-set__acts .btn, .am-key__acts .btn { width: 100%; }
  .am-res { flex: none; }
}