/* «Настройки» (центр управления, 01.11.2026; frontend/modules/settings.js): разделы реестра — карточками, элемент — строка
   «подпись | контрол». Только токены styles.css — светлая и тёмная темы получаются сами, своих цветов здесь нет; кегли из
   шкалы (12/13). Префикс .stg-, чтобы не задеть .st (статусы) и .st-badge. */

/* .note задаёт display:block и перебивает браузерное [hidden] — возвращаем ему силу */
.stg-restart[hidden] { display: none; }
.stg-restart { margin-bottom: var(--sp-16); }

.stg-items { display: flex; flex-direction: column; }
.stg-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: var(--sp-8) var(--sp-24); align-items: center;
  padding: var(--sp-12) 0; border-top: var(--bw) solid var(--line);
}
.stg-item:first-child { border-top: 0; padding-top: 0; }
.stg-item:last-child { padding-bottom: 0; }

.stg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); }
.stg-title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-1); }
.stg-badge {
  padding: 0 var(--sp-6); border: var(--bw) solid var(--line-2); border-radius: var(--r-pill);
  font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap;
}
.stg-hint { margin-top: var(--sp-2); font-size: 12px; line-height: 16px; color: var(--text-2); }
.stg-meta { margin-top: var(--sp-4); font-size: 12px; line-height: 16px; color: var(--text-3); }

.stg-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-8) var(--sp-12); min-width: 0; }
.stg-ctl > input, .stg-ctl > select { width: auto; }

/* число: ползунок + поле рядом; подпись пределов — видимой строкой, не подсказкой */
.stg-num { display: flex; align-items: center; gap: var(--sp-8); flex: 1 1 240px; min-width: 0; }
.stg-range {
  flex: 1 1 120px; width: auto; min-width: 100px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  -webkit-appearance: none; appearance: none; background: var(--line-3); outline: 0; accent-color: var(--ac-600);
}
.stg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ac-600); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--ac-600); cursor: pointer; }
.stg-range::-moz-range-track { height: 4px; background: var(--line-3); border-radius: 2px; border: 0; }
.stg-range::-moz-range-progress { height: 4px; background: var(--ac-600); border-radius: 2px; }
.stg-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ac-600); border: 2px solid var(--surface); }
.stg-range:focus-visible { box-shadow: var(--focus-ring); }
.stg-range:disabled { opacity: .5; cursor: not-allowed; }
.stg-number { flex: none; width: 104px; padding: var(--sp-6) var(--sp-8); border-radius: var(--r-ctl); text-align: right; font-variant-numeric: tabular-nums; }
.stg-range-lim { flex: none; font-size: 12px; line-height: 16px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stg-time, .stg-select { padding: var(--sp-6) var(--sp-8); border-radius: var(--r-ctl); }
.stg-list, .stg-text { flex: 1 1 220px; padding: var(--sp-6) var(--sp-8); border-radius: var(--r-ctl); }

/* тумблер — кнопка role=switch, как .pt-sw в кабинете партнёра */
.stg-sw {
  position: relative; flex: none; width: 34px; height: 20px; padding: 0; border: none; border-radius: var(--r-pill);
  background: var(--line-3); cursor: pointer; transition: background var(--dur-1);
}
.stg-sw[aria-checked="true"] { background: var(--ac-600); }
.stg-sw-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ac-fg); box-shadow: var(--sh-1); transition: transform var(--dur-1);
}
.stg-sw[aria-checked="true"] .stg-sw-knob { transform: translateX(14px); }
.stg-sw:focus-visible { outline: 2px solid var(--ac-600); outline-offset: 2px; }
.stg-sw:disabled { opacity: .45; cursor: not-allowed; }
.stg-sw-text { min-width: 72px; font-size: 12px; line-height: 16px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .stg-sw, .stg-sw-knob { transition: none; } }

/* строка итога у элемента: «Сохраняю…» → «Сохранено» или причина ошибки словами */
.stg-status { flex: 1 1 100%; min-height: 16px; font-size: 12px; line-height: 16px; color: var(--text-3); text-align: right; }
.stg-status--ok { color: var(--ok-ink); }
.stg-status--bad { color: var(--bad-ink); }
.stg-status--warn { color: var(--warn-ink); }
.stg-status--wait { color: var(--text-3); }
.stg-empty { font-size: 13px; line-height: 18px; color: var(--text-3); }

/* журнал: кто, когда, что → что */
.stg-journal { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.stg-journal th { padding: var(--sp-6) var(--sp-8); border-bottom: var(--bw) solid var(--line); text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.stg-journal td { padding: var(--sp-8); border-bottom: var(--bw) solid var(--line); vertical-align: top; color: var(--text-1); overflow-wrap: anywhere; }
.stg-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stg-arrow { color: var(--text-4); }

@media (max-width: 700px) {
  .stg-item { grid-template-columns: 1fr; }
  .stg-ctl { justify-content: flex-start; }
  .stg-status { text-align: left; }
}