/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Страница настроек с вкладками-разделами (st-*): подключает общий вид из settings-common.css и добавляет вкладки.
   Экран подключает этот файл сам: ensureStylesheet(document, 'settings'). Остальные экраны настроек берут его же и,
   если нужно своё, добавляют settings-<область>.css.

   Вкладки: <div class="st-tabs" role="tablist" aria-label="…"> <button class="st-tab" role="tab" aria-selected="true|false" aria-controls="…" tabindex="0|-1">…</button> </div>
   Панель:  <div class="st-panel" role="tabpanel" aria-labelledby="…" hidden?> … </div>   Страница: <div class="st"> … </div> */
@import url('settings-common.css');

.st { display: grid; gap: var(--space-6); align-content: start; width: 100%; max-width: var(--layout-form); min-width: 0; box-sizing: border-box; }
.st > * { min-width: 0; }
.st-intro { 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-intro[hidden], .st-intro:empty { display: none; }

/* Вкладки-разделы: в строку с переносом, активная — плашка с мягкой тенью */
.st-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.st-tab {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); max-width: 100%; padding-inline: var(--space-4); margin: 0; border: 0;
  border-radius: var(--radius-item); background: transparent; color: var(--color-ink2); cursor: pointer; text-align: start;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.st-tab:hover { color: var(--color-ink); background: var(--color-panel2); }
.st-tab[aria-selected="true"] { background: var(--color-panel); color: var(--color-ink); font-weight: var(--weight-medium); box-shadow: var(--shadow-ring); }
.st-tab:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.st-tab[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .st-tab { transition: none; } }

.st-panel { display: grid; gap: var(--space-6); align-content: start; min-width: 0; }
.st-panel[hidden] { display: none; }
.st-panel > * { min-width: 0; }
.st-panel:focus { outline: none; }
.st-panel:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* Ссылка-кнопка «перейти на вкладку» */
.st-link { display: inline-flex; align-items: center; min-height: var(--size-touch-min); max-width: 100%; padding: 0 var(--space-1); border: 0; background: none; color: var(--color-acc-text); text-decoration: underline; cursor: pointer; font: inherit; text-align: start; }
.st-link:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }

/* Вкладки: список и панели в одном столбце */
.st-wrap { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.st-wrap[hidden] { display: none; }

/* Общая раскладка экрана настроек (ui/settings-layout.js): шапка — заголовок, описание, действия; ниже слева список разделов, справа раздел.
   <div class="st st-shell"> <header class="st-head"><div class="st-head__t"><h2 class="st-head__h">…</h2><p class="st-head__d">…</p></div><div class="st-head__acts">…</div></header>
   <div class="st-lay"> <nav class="st-side">…</nav> <div class="st-main"> карточки st-sec </div> </div> </div>
   До 48rem список разделов идёт над разделом (одна строка с прокруткой); от 48rem — колонка 12.5rem слева, липкая. Ширина раздела — --layout-form. */
.st.st-shell { max-width: none; }
.st-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); min-width: 0; }
.st-head[hidden] { display: none; }
.st-head__t { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 18rem; }
.st-head__h { margin: 0; overflow-wrap: anywhere; }
.st-head__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-head__d[hidden], .st-head__d:empty { display: none; }
/* Ссылка внутри описания — часть фразы: без высоты касания, иначе строка с ней растягивается и абзац рвётся */
.st-head__d .link { display: inline; min-height: 0; min-width: 0; }
.st-head__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }

.st-lay { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.st-lay[hidden] { display: none; }
.st-lay > * { min-width: 0; }
.st-main { display: grid; gap: var(--tile-gap); align-content: start; max-width: var(--layout-form); min-width: 0; }
.st-side { min-width: 0; }
/* Экран без списка разделов: единственная колонка занимает всю ширину раскладки. Широкий main — графики и сетки плиток без предела --layout-form. */
.st-lay > .st-main:only-child { grid-column: 1 / -1; }
.st-main--wide { max-width: none; }

@media (min-width: 48rem) {
  .st-lay { grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--space-8); }
  .st-lay > .st-tabs, .st-lay > .st-side { flex-direction: column; flex-wrap: nowrap; position: sticky; top: var(--space-4); }
  .st-lay > .st-tabs .st-tab { min-height: var(--size-nav-item); }
}
/* Узкий экран: разделы — одна строка с горизонтальной прокруткой, а не два ряда; пункт не сжимается и не переносит слова */
@media (max-width: 47.9375rem) {
  .st-lay > .st-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: var(--space-1); }
  .st-lay > .st-tabs .st-tab { flex: none; max-width: none; white-space: nowrap; }
}
/* Касание: на планшете с грубым указателем разделы тоже не ниже 44 px */
@media (min-width: 48rem) and (pointer: coarse) {
  .st-lay > .st-tabs .st-tab { min-height: var(--size-touch-min); }
}

/* Строки «подпись слева — поле справа — подсказка под полем» в карточке раздела: только от 64rem, на узком — подпись над полем.
   Работает для форм настроек (am-field: подпись и ввод в .ui-field, подсказка и итог рядом). Переключатели и группы флажков — на всю ширину. */
.st-main .am-form .am-field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding-block: var(--space-4); }
.st-main .am-form .am-field:first-child { padding-top: 0; }
.st-main .am-form .am-field + .am-field { border-top: 0.0625rem solid var(--color-line); }
@media (min-width: 64rem) {
  .st-main .am-field { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: var(--space-1) var(--space-6); align-items: baseline; }
  .st-main .am-field > .ui-field { display: contents; }
  .st-main .am-field > .ui-field > .ui-field__l { grid-column: 1; align-self: start; padding-top: var(--space-2); }
  .st-main .am-field > .ui-field > :not(.ui-field__l) { grid-column: 2; }
  .st-main .am-field > :is(.ui-field__h, .am-res) { grid-column: 2; }
  .st-main .am-field > :is(.rps-own, .am-field__sw, .am-field__set) { grid-column: 1 / -1; }
}

/* Раздел с одной группой: заголовок группы формы повторял бы заголовок карточки — оставлен только для чтения с экрана */
.st-main .am-set__sec:only-of-type > .am-set__h { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Профиль проекта на вкладке «Подбор идей»: сайт берётся с вкладки «Проект» — показан текстом, рядом ссылка на неё */
.rpf-site--ext { display: grid; gap: var(--space-2); min-width: 0; }
.rpf-site__url { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rpf-site__url[data-empty="true"] { color: var(--color-warn-text); }
.rpf-site__open { min-height: var(--size-touch-min); max-width: 100%; white-space: normal; }