/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Шаги 3 и 4 мастера первой настройки: «Ваш проект» (setup-step-project.js) и «Что подключить» (setup-step-modules.js). Классы ss-*.
   Значения — только из tokens.css, размеры в rem. Поля, кнопки, уведомления и статусы — из kit.css и base.css; строки быстрых настроек —
   из modules-settings.css (.am-set, .am-field). Подключается в index.html после modules-settings.css (подключает рамка мастера). */

.ss { display: grid; gap: var(--space-5); min-width: 0; color: var(--color-ink); }
.ss > * { min-width: 0; }
.ss[aria-busy="true"] { cursor: progress; }
.ss-lead, .ss-note, .ss-sub { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ss-sub { color: var(--color-ink); font-weight: var(--weight-medium); }
.ss-msg { margin: 0; }
.ss-res { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; }
.ss-res[data-tone="ok"] { color: var(--color-ok-text); }
.ss-res[data-tone="warn"] { color: var(--color-warn-text); }

/* ---------- Форма проекта ---------- */
.ss-form, .ss-fields { display: grid; gap: var(--space-5); min-width: 0; }
.ss-set { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-set > legend { padding: 0; }
.ss-types { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.ss-modes { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.ss .ui-field input.mono { font-family: var(--font-mono); }
.ss .ui-field :is(.ui-field__h, .ui-field__e) { overflow-wrap: anywhere; }

/* Вариант выбора (радио): вся плашка — одна цель для касания не ниже 44 px. */
.ss-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-items: center;
  min-height: var(--size-touch-min); padding: var(--space-3) var(--space-4); box-sizing: border-box;
  border: 1px solid var(--color-line); border-radius: var(--radius-ctl); background: var(--color-panel); cursor: pointer;
}
.ss-opt:hover { border-color: var(--color-line2); }
.ss-opt:has(input:checked) { border-color: var(--color-acc); background: var(--color-acc-soft); }
.ss-opt:has(input:focus-visible) { outline: var(--size-focus-width) solid var(--color-acc); outline-offset: 0; }
.ss-opt input { grid-row: 1 / span 2; margin: 0; accent-color: var(--color-acc); }
.ss-opt--row input { grid-row: auto; }
.ss-opt__t { color: var(--color-ink); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.ss-opt__d { grid-column: 2; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

.ss-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; min-width: 0; }
.ss-acts .btn { min-height: var(--size-touch-min); }
.ss-acts .btn[disabled] { cursor: progress; }
.ss-confirm { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-warn); border-radius: var(--radius-ctl); background: var(--color-panel); }
.ss-confirm__t { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }

/* ---------- Итог шага «Ваш проект» ---------- */
.ss-done { display: grid; gap: var(--space-4); min-width: 0; }
.ss-done__t { margin: 0; color: var(--color-ok-text); font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); }
.ss-sum { display: grid; margin: 0; border-top: 1px solid var(--color-line); }
.ss-sum__r {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3); border-bottom: 1px solid var(--color-line);
}
.ss-sum__k { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ss-sum__v { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }

/* ---------- Карточки модулей ---------- */
.ss-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.ss-card {
  display: grid; gap: var(--space-3); align-content: start; min-width: 0; box-sizing: border-box;
  padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-panel);
}
.ss-card > * { min-width: 0; }
.ss-card__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.ss-card__t { margin: 0; color: var(--color-ink); font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); }
.ss-settings { display: grid; gap: var(--space-4); min-width: 0; }
.ss-settings .am-field { padding-block: var(--space-4); }
.ss-settings .btn--sm { min-height: var(--size-touch-min); }

/* ---------- Широкие экраны ---------- */
@media (min-width: 48rem) {
  .ss-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-card--site { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .ss-opt { transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
}