/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Общий вид настроек (st-*): раздел, заголовок раздела, строка «Сохранить» с итогом.
   Применяется на всех экранах настроек (общие «Настройки» и «Уведомления», настройки проекта и «Автоматические решения», настройки модулей и сайта статей,
   роликов, «Телефон», «Подписка и расходы», «Компьютеры»); подключён в index.html после остальных стилей, поэтому на равных по весу правилах побеждает он.
   Свои стили экрана — в его собственном css; классы раздела st-* ставятся рядом со старыми (старые остаются зацепками для скриптов и тестов).
   Только токены из tokens.css, размеры в rem. Ширина по --layout-form, на узком экране без горизонтальной прокрутки, касания не меньше --size-touch-min.

   Раздел:      <section class="tile st-sec" aria-labelledby="…"> <header class="st-sec__head"><h2 class="h3 st-sec__h">…</h2><p class="st-sec__d">…</p></header> … </section>
   Сохранить:   <div class="st-acts"><button class="btn btn--primary st-save">Сохранить</button> <p class="st-res" role="status" aria-live="polite" data-tone="ok|warn|danger">итог</p></div>
   Пояснение:   <p class="st-note">…</p> (мелкий текст под разделом)  */

.st-sec { display: grid; gap: var(--space-5); align-content: start; min-width: 0; max-width: 100%; box-sizing: border-box; padding: var(--space-6); }
/* Один вид плитки на всех экранах: без рамки, мягкая рамка-тень (старые set-sec / pjst-tile / ph-card задавали свою рамку) */
.st-sec { border: 0; border-radius: var(--tile-radius); background: var(--surface-tile); box-shadow: var(--shadow-ring); }
.st-sec > * { min-width: 0; max-width: 100%; }
.st-sec > a.link { justify-self: start; }
.st-sec[aria-busy="true"] { cursor: progress; }
.st-sec[hidden] { display: none; }
.st-sec__head { display: grid; gap: var(--space-1); min-width: 0; }
.st-sec__h { margin: 0; overflow-wrap: anywhere; }
.st-sec__d { margin: 0; max-width: var(--layout-measure); color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.st-sec__d:empty { display: none; }
.st-note { margin: 0; max-width: var(--layout-measure); color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.st-note[hidden], .st-note:empty { display: none; }

/* «Сохранить» и итог рядом: на телефоне кнопка на всю ширину, итог под ней */
.st-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.st-save { min-height: var(--size-touch-min); max-width: 100%; white-space: normal; text-align: center; }
.st-save:disabled, .st-save[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.st-res { margin: 0; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.st-res:empty { display: none; }
.st-res[data-tone="ok"] { color: var(--color-ok-text); }
.st-res[data-tone="warn"], .st-res[data-tone="dirty"] { color: var(--color-warn-text); }
.st-res[data-tone="danger"] { color: var(--color-danger-text); }

@media (max-width: 47.9375rem) {
  .st-sec { padding: var(--space-4); gap: var(--space-4); }
}
@media (max-width: 39.99rem) {
  .st-save { width: 100%; }
}