/* Источник: проект Claude Design «SiteCreator Cabinet Design System», parts/forms.css.
   Срез 14 августа 2026. Файл держится побайтово равным источнику: расхождение
   репозитория с проектом считается дефектом, а не локальной правкой. */

/* Поля. Опознаётся полем то, у чего есть плотная граница: волосяная линия делает
   поле похожим на разделитель, и человек не понимает, куда вводить. */
.sc-field{display:flex;flex-direction:column;gap:var(--sc-space-8)}
.sc-field__label{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);line-height:1.4}
.sc-field__hint{font-size:var(--sc-text-caption);line-height:var(--sc-lh-caption);color:var(--sc-text-muted)}
.sc-field__error{display:flex;align-items:flex-start;gap:var(--sc-space-8);
  font-size:var(--sc-text-caption);line-height:var(--sc-lh-caption);color:var(--sc-danger);font-weight:var(--sc-fw-medium)}

.sc-input,.sc-textarea,.sc-select{inline-size:100%;min-block-size:var(--sc-control-h-md);
  padding:var(--sc-btn-pad-block) var(--sc-space-16);background:var(--sc-surface);color:var(--sc-text);
  border:var(--sc-rule-w-hair) solid var(--sc-border-strong);border-radius:var(--sc-radius-ctl);
  font-size:var(--sc-text-body-sm);line-height:1.5}
.sc-textarea{min-block-size:120px;resize:vertical}
.sc-input::placeholder,.sc-textarea::placeholder{color:var(--sc-text-placeholder)}
.sc-input:hover,.sc-textarea:hover,.sc-select:hover{border-color:var(--sc-ink-700)}
.sc-input:focus-visible,.sc-textarea:focus-visible,.sc-select:focus-visible{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset);border-color:var(--sc-text)}
/* Ошибка держится на трёх признаках: толстая граница, значок и слово рядом.
   Цветом одним нельзя - в принудительной палитре красное неотличимо. */
.sc-input[aria-invalid="true"],.sc-textarea[aria-invalid="true"],.sc-select[aria-invalid="true"]{border-width:var(--sc-rule-w);border-color:var(--sc-danger)}
.sc-input[disabled],.sc-textarea[disabled],.sc-select[disabled]{background:var(--sc-disabled-bg);color:var(--sc-disabled-text);border-color:var(--sc-disabled-border);cursor:not-allowed}
.sc-select{appearance:none;padding-inline-end:var(--sc-space-48)}
.sc-select-wrap{position:relative;display:block}
/* Шеврон стоит по инлайновой оси, не по физической: в RTL он уезжает налево сам. */
.sc-select-wrap__chevron{position:absolute;inset-inline-end:var(--sc-space-16);inset-block-start:50%;
  translate:0 -50%;pointer-events:none;color:var(--sc-ink-600)}

/* Чип. Таблетка - форма выбираемого. Выбранное - заливка акцента; фокус - кольцо:
   идущий по табуляции обязан отличать «я здесь» от «это выбрано». */
.sc-chip{display:inline-flex;align-items:center;gap:var(--sc-space-8);min-block-size:var(--sc-tap-min);
  padding-inline:var(--sc-space-16);border:var(--sc-rule-w-hair) solid var(--sc-border-strong);
  border-radius:var(--sc-radius-btn);background:var(--sc-surface);color:var(--sc-text);
  font-size:var(--sc-text-body-sm);cursor:pointer;white-space:normal;text-align:start}
.sc-chip:hover{background:var(--sc-quiet-hover)}
.sc-chip[aria-pressed="true"],.sc-chip[aria-selected="true"]{background:var(--sc-selected-surface);
  color:var(--sc-selected-on);border-color:var(--sc-selected-border);font-weight:var(--sc-fw-medium)}
.sc-chip[disabled],.sc-chip[aria-disabled="true"]{background:var(--sc-disabled-bg);color:var(--sc-disabled-text);border-color:var(--sc-disabled-border);cursor:not-allowed}

/* Флажок и переключатель. Цель нажатия - вся строка, а не квадратик 20px. */
.sc-choice{display:flex;align-items:flex-start;gap:var(--sc-space-12);min-block-size:var(--sc-tap-min);
  padding-block:var(--sc-space-8);cursor:pointer}
.sc-choice__box{flex:none;inline-size:22px;block-size:22px;margin-block-start:2px;
  border:var(--sc-rule-w) solid var(--sc-ink-600);border-radius:6px;background:var(--sc-surface);
  display:flex;align-items:center;justify-content:center;color:var(--sc-accent-on)}
.sc-choice__box--radio{border-radius:var(--sc-radius-pill)}
.sc-choice input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.sc-choice input:checked + .sc-choice__box{background:var(--sc-accent);border-color:var(--sc-accent)}
.sc-choice input:focus-visible + .sc-choice__box{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset)}
.sc-choice input:disabled + .sc-choice__box{background:var(--sc-disabled-bg);border-color:var(--sc-ink-300)}
.sc-choice__dot{inline-size:10px;block-size:10px;border-radius:var(--sc-radius-pill);background:var(--sc-accent-on)}
.sc-choice__text{font-size:var(--sc-text-body-sm);line-height:1.5}
.sc-choice__text small{display:block;font-size:var(--sc-text-caption);color:var(--sc-text-muted)}
.sc-choice--disabled .sc-choice__text{color:var(--sc-disabled-text)}

/* Тумблер. Состояние подписано словом рядом: положение ручки - не единственный
   признак, а цвет заливки - не признак вовсе. */
.sc-switch{display:flex;align-items:center;gap:var(--sc-space-12);min-block-size:var(--sc-tap-min);cursor:pointer}
.sc-switch__track{position:relative;flex:none;inline-size:52px;block-size:30px;border-radius:var(--sc-radius-pill);
  background:var(--sc-ink-100);border:var(--sc-rule-w-hair) solid var(--sc-border-strong);
  transition:background var(--sc-dur-fast) var(--sc-ease)}
.sc-switch__knob{position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:22px;block-size:22px;
  border-radius:var(--sc-radius-pill);background:var(--sc-surface);box-shadow:var(--sc-shadow-sticky);
  transition:inset-inline-start var(--sc-dur-fast) var(--sc-ease)}
.sc-switch input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.sc-switch input:checked + .sc-switch__track{background:var(--sc-accent);border-color:var(--sc-accent)}
.sc-switch input:checked + .sc-switch__track .sc-switch__knob{inset-inline-start:25px}
.sc-switch input:focus-visible + .sc-switch__track{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset)}
.sc-switch__state{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium)}

/* Всплывающее над полем. Рисуется слоем поверх и не двигает то, что под полем:
   список, раздвинувший раскладку, уносит кнопку продолжения за край. */
.sc-popover-host{position:relative}
.sc-popover{position:absolute;inset-inline:0;inset-block-start:calc(100% + var(--sc-space-8));
  z-index:var(--sc-z-popover);max-block-size:280px;overflow:auto;
  background:var(--sc-surface);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius);box-shadow:var(--sc-shadow-overlay);padding:var(--sc-space-8)}
.sc-popover__item{display:flex;align-items:center;gap:var(--sc-space-12);inline-size:100%;
  min-block-size:var(--sc-tap-min);padding:var(--sc-space-8) var(--sc-space-12);border:0;
  background:transparent;border-radius:var(--sc-radius);text-align:start;cursor:pointer;
  font-size:var(--sc-text-body-sm);color:var(--sc-text)}
.sc-popover__item:hover{background:var(--sc-quiet-hover)}
.sc-popover__item[aria-selected="true"]{background:var(--sc-selected-surface);color:var(--sc-selected-on);font-weight:var(--sc-fw-medium)}

/* Свотч палитры показывает СОБСТВЕННЫЙ цвет, а не цвет системы: клетка под
   прозрачным и рамка выбранного строятся на своих значениях, иначе свотч
   исчезает ровно в том случае, который человек и искал. */
.sc-swatch{position:relative;inline-size:var(--sc-tap-min);block-size:var(--sc-tap-min);padding:0;
  border:1px solid rgba(0,0,0,.24);border-radius:var(--sc-radius-pill);cursor:pointer;overflow:hidden}
.sc-swatch--selected{box-shadow:0 0 0 2px #ffffff,0 0 0 4px #121317}
.sc-swatch:focus-visible{outline:2px solid #121317;outline-offset:3px}
/* rtl-ok: шахматка под прозрачным цветом симметрична, зеркалить нечего */
.sc-swatch__checker{position:absolute;inset:0;
  background-image:linear-gradient(45deg,#d9d9d9 25%,transparent 25%,transparent 75%,#d9d9d9 75%),
    linear-gradient(45deg,#d9d9d9 25%,transparent 25%,transparent 75%,#d9d9d9 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;background-color:#ffffff}

/* --- НАБОР ОРГАНОВ ПАНЕЛИ НАСТРОЙКИ БЛОКА ---
   Волосяная линия рисуется КОЛЬЦОМ внутрь, а не границей: при утолщении кольца ничего
   не сдвигается, и то же кольцо становится кольцом фокуса. Заливки у полей нет - она
   пришла бы из плоскости, на которой поле стоит. */
.sc-swrow{display:flex;align-items:center;gap:var(--sc-space-12);min-block-size:var(--sc-tap-min);
  padding-block:2px}
.sc-swrow__text{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:2px}
.sc-swrow__label{font-size:var(--sc-text-body-sm);line-height:1.4;cursor:pointer}
.sc-swrow__hint{font-size:var(--sc-text-caption);line-height:var(--sc-lh-caption);
  color:var(--sc-text-muted)}
/* Возврат к исходному показывается ТОЛЬКО у изменённой строки и только под курсором:
   постоянная стрелка у каждой строки - шум, который перестают видеть. */
.sc-revert{flex:none;inline-size:28px;block-size:28px;display:grid;place-items:center;padding:0;
  border:0;border-radius:var(--sc-radius-pill);background:transparent;color:var(--sc-ink-600);
  cursor:pointer;opacity:0;transition:opacity var(--sc-dur-fast) var(--sc-ease)}
.sc-revert .sc-icon{font-size:18px}
.sc-swrow:hover .sc-revert,.sc-swrow:focus-within .sc-revert,
.sc-cfield:hover .sc-revert,.sc-cfield:focus-within .sc-revert,
.sc-revert:focus-visible{opacity:1}
.sc-revert:hover{background:var(--sc-quiet-hover);color:var(--sc-text)}
.sc-revert:focus-visible{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:2px}
/* Строка настройки с органом под подписью - для тех органов, что не влезают в строку. */
.sc-cfield{display:flex;flex-direction:column;gap:6px}
.sc-cfield__hd{display:flex;align-items:center;gap:var(--sc-space-8);min-block-size:28px}
.sc-cfield__hd > span:first-child{flex:1;min-inline-size:0;font-size:var(--sc-text-body-sm)}
/* Заголовок группы: тихий, с большим отступом СВЕРХУ, чем зазор внутри группы. */
.sc-cgroup{margin-block-start:var(--sc-space-16);font-size:var(--sc-text-caption);
  font-weight:var(--sc-fw-medium);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sc-text-muted)}
.sc-cgroup:first-child{margin-block-start:0}