:root {
  --form-label-size: .82rem;
  --form-label-weight: 600;
  --form-label-line-height: 20px;
  --form-label-letter-spacing: 0;
  --form-field-gap: 6px;
  --form-stack-gap: 16px;
  --form-control-height: var(--ui-control-height, 36px);
  --form-control-radius: var(--ui-control-radius, 7px);
  --form-control-padding-x: 11px;
  --form-control-padding-y: 8px;
  --form-control-font-size: .88rem;
  /* Калибр иконки календаря: один на нативное поле даты и на кнопку
     DateFieldKit (date-field-kit.css). Обе выбивались из общей шкалы иконок:
     нативная не имела размера вовсе и рисовалась браузерной, кнопка
     DateFieldKit держала свои 18px и на десктопе была заметно крупнее
     соседних иконок полей (стрелка select — 15px, иконка кнопки — 16px).
     Теперь величина одна и та же, что у иконок кнопок приложения:
     16px на десктопе, 18px на телефоне (--ui-button-icon-size). */
  --form-date-icon-size: var(--ui-button-icon-size, 16px);
  --field-border: color-mix(in srgb, var(--ui-border-strong) 40%, var(--ui-border));
  --field-focus-border-color: var(--ui-border-accent);
  --field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
  --field-error-border-color: var(--danger);
  --field-error-ring: 0 0 0 3px color-mix(in srgb, var(--ui-danger-strong) 10%, transparent);
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.numeric-stepper__input):focus,
body select:focus,
body textarea:focus {
  outline: none;
  border-color: var(--field-focus-border-color);
  box-shadow: none;
}

html:not([data-input-modality="pointer"]) body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.numeric-stepper__input):focus-visible,
html:not([data-input-modality="pointer"]) body select:focus-visible,
html:not([data-input-modality="pointer"]) body textarea:focus-visible {
  box-shadow: var(--field-focus-ring);
}

[data-field-focus-boundary]:focus-within {
  border-color: var(--field-focus-border-color);
  box-shadow: none;
}

html:not([data-input-modality="pointer"]) [data-field-focus-boundary]:has(:focus-visible) {
  box-shadow: var(--field-focus-ring);
}

[data-field-focus-boundary] :is(input, select, textarea),
[data-field-focus-boundary] :is(input, select, textarea):focus,
[data-field-focus-boundary] :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: transparent !important;
  box-shadow: none !important;
}

.field-kit {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap);
  min-width: 0;
}

.field-kit__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--field-label-row-height, 20px);
  min-height: var(--field-label-row-height, 20px);
  max-height: var(--field-label-row-height, 20px);
  min-width: 0;
  line-height: var(--field-label-row-height, 20px);
}

.field-kit__label,
.field-kit__label-row > .field-kit__label {
  display: inline-flex;
  align-items: baseline;
  column-gap: 4px;
  min-width: 0;
  height: var(--field-label-row-height, 20px);
  min-height: var(--field-label-row-height, 20px);
  max-height: var(--field-label-row-height, 20px);
  margin: 0;
  color: var(--muted);
  font-size: var(--form-label-size);
  font-weight: var(--form-label-weight);
  letter-spacing: var(--form-label-letter-spacing);
  text-transform: none;
  line-height: var(--form-label-line-height);
  white-space: nowrap;
}

.field-kit__label-tools { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; margin-left:auto; }
.field-kit__control-wrap { position:relative; min-width:0; }
.field-kit__info { display:inline-flex; align-items:center; flex:0 0 auto; }
.field-kit__control-wrap > .field-kit__info {
  position:absolute; z-index:4; left:12px; top:calc(var(--field-height, var(--form-control-height)) / 2);
  transform:translateY(-50%);
}
.field-kit__info-button {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 20px; width:20px; min-width:20px; max-width:20px;
  height:20px; min-height:20px; max-height:20px;
  padding:0; border:0; border-radius:5px; box-sizing:border-box;
  background:transparent; color:var(--ui-text-placeholder); cursor:help;
}
.field-kit__info-button svg { display:block; width:15px; height:15px; }
.field-kit__info-button:hover,
.field-kit__info-button:focus-visible { background:transparent; color:var(--accent); outline:none; }
.field-kit__info-tooltip {
  display:none;
}
.field-kit__control-wrap.has-info > :is(input, textarea).field-kit-native-control { padding-left:42px; }
.field-kit__control-wrap.has-info > select.field-kit-select {
  padding-left:42px;
}
.field-kit__control-wrap.has-info [data-chip-root] { padding-left:42px; }
.field-kit__control-wrap.has-info .combo-select-field .csf-input { padding-left:42px; }
.field-kit__control-wrap.has-info .buyer-template-textarea > textarea { padding-left:42px; }
.field-kit__info-tooltip-portal {
  position:fixed; z-index:2147483000;
  width:max-content; max-width:min(320px, calc(100vw - 32px));
  padding:10px 12px; border:1px solid color-mix(in srgb, var(--ui-border) 82%, transparent); border-radius:9px;
  background:color-mix(in srgb, var(--ui-surface-elevated) 97%, transparent); color:var(--text);
  box-shadow:0 10px 28px rgba(15, 23, 42, .16), 0 2px 7px rgba(15, 23, 42, .08);
  font-size:.78rem; font-weight:400; line-height:1.45; white-space:normal;
  pointer-events:none;
}
.field-kit__info-tooltip-portal[hidden] { display:none; }

.field-kit__required,
.req {
  display: inline-flex;
  align-items: center;
  height: 1em;
  margin-left: .25em;
  color: var(--danger);
  font-weight: 700;
  line-height: 1;
}

label > .text-danger {
  margin-left: .25em;
}

.field-kit__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 0 2px 0 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.field-kit__action:hover {
  color: var(--accent);
}

.field-kit__link,
.tp-default-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--field-label-row-height, 20px);
  min-height: var(--field-label-row-height, 20px);
  max-height: var(--field-label-row-height, 20px);
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-placeholder);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 400;
  line-height: var(--field-label-row-height, 20px);
  padding: 0 2px;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  box-sizing: border-box;
}

.field-kit__link:hover,
.tp-default-link:hover {
  color: var(--accent);
}

.field-kit__link:focus-visible,
.field-kit__action:focus-visible,
.tp-default-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

button.field-kit__link,
button.tp-default-link {
  height: var(--field-label-row-height, 20px);
  min-height: var(--field-label-row-height, 20px);
  max-height: var(--field-label-row-height, 20px);
  padding: 0 2px;
  line-height: var(--field-label-row-height, 20px);
}

.field-kit__control {
  min-width: 0;
}

/* STYLE_GUIDE §3: вторичный текст не мельче 13px — на обеих ступенях, а не
   только на телефоне. Прежние .74rem давали 11.8px: подсказки и ошибки полей
   оказывались самым мелким текстом приложения. */
.field-kit__hint,
.field-kit__error {
  font-size: var(--ui-font-size-secondary-min, 13px);
  line-height: 1.35;
}

.field-kit__hint {
  color: var(--muted);
}

/* Подсказка у поля может нести несколько сообщений (пересечение шаблонов с
   двумя соседями). Каждое — отдельный абзац, а не слипшийся текст. */
.field-kit__hint-line {
  margin: 0;
}

.field-kit__hint-line + .field-kit__hint-line {
  margin-top: 4px;
}

.field-kit__error {
  display: none;
  color: var(--danger);
}

.field-kit.is-error .field-kit__error {
  display: block;
}

.field-kit .field-kit-control,
body .field-kit-control {
  width: 100%;
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  padding: var(--field-padding-y, var(--form-control-padding-y)) var(--field-padding-x, var(--form-control-padding-x));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--field-radius, var(--form-control-radius));
  background: var(--ui-surface-card);
  color: var(--text);
  font: inherit;
  font-size: var(--field-font-size, var(--form-control-font-size));
  line-height: 1.35;
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
  box-sizing: border-box;
}

body .field-kit-native-control {
  width: 100%;
  min-width: 0;
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  max-height: var(--field-height, var(--form-control-height));
  padding: var(--field-padding-y, var(--form-control-padding-y)) var(--field-padding-x, var(--form-control-padding-x));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--field-radius, var(--form-control-radius));
  background-color: var(--ui-surface-card);
  color: var(--text);
  font: inherit;
  font-size: var(--field-font-size, var(--form-control-font-size));
  line-height: 1.2;
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
  box-sizing: border-box;
}

body input.field-kit-native-control:not([type="checkbox"]):not([type="radio"]),
body select.field-kit-native-control {
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  max-height: var(--field-height, var(--form-control-height));
  box-sizing: border-box;
}

body .wk-step-panel input.field-kit-native-control:not([type="checkbox"]):not([type="radio"]),
body .wk-step-panel select.field-kit-native-control {
  width: 100%;
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  max-height: var(--field-height, var(--form-control-height));
  padding: 0 var(--field-padding-x, var(--form-control-padding-x));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--field-radius, var(--form-control-radius));
  background-color: var(--ui-surface-card);
  color: var(--text);
  font-family: inherit;
  font-size: var(--field-font-size, var(--form-control-font-size));
  font-weight: 400;
  line-height: 1.2;
  box-sizing: border-box;
}

body .wk-step-panel .field-kit__control-wrap.has-info > :is(input, textarea).field-kit-native-control,
body .wk-step-panel .field-kit__control-wrap.has-info > select.field-kit-select {
  padding-left:42px;
}

body input.field-kit-control:not([type="checkbox"]):not([type="radio"]),
body select.field-kit-control {
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  max-height: var(--field-height, var(--form-control-height));
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

body input.field-kit-native-control:not([type="checkbox"]):not([type="radio"]) {
  padding-top: 0;
  padding-bottom: 0;
}

.field-kit-native-control::placeholder {
  color: var(--ui-text-placeholder);
}

/*
 * Единый цвет подсказки для ВСЕХ нативных полей приложения, а не только для
 * тех, что несут класс FormFieldKit. Глобального правила ::placeholder в
 * проекте не было вовсе: поле без класса набора получало браузерное
 * умолчание — оно темнее токена, и подсказка стояла рядом с соседями другим
 * цветом. Заметнее всего это было на «ДД.ММ.ГГГГ» в полях даты DateFieldKit.
 * Специфичность здесь наименьшая из возможных (два элемента), поэтому любое
 * компонентное правило по-прежнему выигрывает. opacity нужен ради Firefox:
 * он приглушает подсказку сверх цвета.
 */
body :is(input, textarea)::placeholder {
  color: var(--ui-text-placeholder);
  opacity: 1;
}

/*
 * Нативное поле даты. Три расхождения с остальными полями приложения
 * закрываются здесь централизованно — правила адресуют ЛЮБОЙ
 * input[type="date"] страницы, а не отдельные места-потребители (окна
 * просмотра поставщика и покупателя, «Дата договора», «Дата подключения»,
 * диапазон «Последняя отправка» в фильтре таблицы).
 *
 * 1. Кегль. И значение, и пустая маска рисуются внутри
 *    ::-webkit-datetime-edit: у поля свой font-size, у внутреннего редактора
 *    — свой, поэтому размер называется ему явно.
 * 2. Иконка календаря. Её размер не задавал никто: браузер рисовал
 *    собственную (~16–17px) плюс свой внутренний отступ. Теперь она берёт
 *    --form-date-icon-size — тот же токен, что и кнопка календаря
 *    DateFieldKit, то есть общий калибр иконок приложения.
 * 3. Цвет пустой маски «дд.мм.гггг». Это подсказка, а не значение, и красится
 *    тем же токеном, что ::placeholder соседних полей — см. правило ниже.
 */
body input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  font-size: inherit;
  line-height: normal;
}

body input[type="date"]::-webkit-calendar-picker-indicator {
  width: var(--form-date-icon-size);
  height: var(--form-date-icon-size);
  padding: 0;
  margin-inline-start: 6px;
  cursor: pointer;
  /*
   * Родной глиф Blink — чёрный залитый календарь. В ряду тонких контурных
   * иконок приложения он кричит и оказывается самым тёмным пятном поля,
   * темнее и подсказки, и самого значения (замечание владельца 26.08.2026).
   *
   * Рисунок берём из общего пака Lucide — те же четыре штриха, что у кнопки
   * календаря DateFieldKit, которая стоит рядом в других полях; иначе одна
   * и та же вещь была бы нарисована двумя разными способами. Способ подмены —
   * маска, а не картинка-фон: в data-URI нельзя сослаться на токен, а маска
   * красится обычным цветом, и тон остаётся в системе. Тон — подсказки:
   * иконка сообщает про поле, а не про его значение.
   */
  background: var(--ui-text-placeholder);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Наведение. Иконка — единственная кнопка внутри поля даты, и до сих пор она
 * ничем не отвечала на курсор (замечание владельца 26.08.2026). Подложку под
 * неё не подложить: глиф нарисован маской, а фон маски — это сам глиф.
 * Поэтому отклик — потемнение до тона обычного текста, ровно как у крестика
 * очистки в поле поиска. Наведение объявлено только там, где курсор есть.
 */
@media (hover: hover) {
  body input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background: var(--ui-text);
  }
}

body input[type="date"]::-webkit-calendar-picker-indicator:active {
  background: var(--ui-text-accent);
}

/*
 * Пустая маска «дд.мм.гггг» — подсказка, а не значение, и держит токен
 * подсказки. Способ отбора пустого поля выбран замером в браузере, а не по
 * памяти, поэтому здесь записано и то, что НЕ работает:
 *
 *   · ::placeholder и :placeholder-shown у input[type="date"] не существуют;
 *   · пустое необязательное поле остаётся :valid, поэтому «:not(:focus):invalid»
 *     его не отбирает (проверено: у пустого поля :invalid = false);
 *   · Blink не принимает НИ ОДИН селектор после ::-webkit-datetime-edit-*-field:
 *     правило с «:not([aria-valuenow])» отбрасывается парсером целиком
 *     (CSS.supports(selector(...)) = false), поэтому приём «покрасить пустые
 *     подполя» неприменим;
 *   · :blank в браузере не реализован.
 *
 * Работает единственное: у поля даты БЕЗ объявленных границ Blink считает
 * :in-range только пустое значение — заполненное не попадает ни в :in-range,
 * ни в :out-of-range (замерено на пустом, заполненном, очищенном и вновь
 * заполненном поле). Границы всё меняют: с min/max в :in-range попадает и
 * заполненная дата, поэтому такие поля исключены — там маска просто останется
 * основным цветом, как была. Если браузер когда-нибудь приведёт :in-range к
 * букве спецификации, правило перестанет находить что-либо и поведение
 * вернётся к сегодняшнему — молча и без порчи заполненных дат.
 *
 * JS в окраске не участвует: атрибут data-empty ниже — это уже существующий
 * механизм TableKit для диапазонов дат, новых он не заводит.
 */
body input[type="date"]:not([min]):not([max]):in-range::-webkit-datetime-edit,
body input[type="date"][data-empty="true"]::-webkit-datetime-edit {
  color: var(--ui-text-placeholder);
}

.field-kit-native-control:disabled,
.field-kit-native-control[readonly] {
  background-color: var(--ui-surface-subtle);
  color: var(--muted);
}

body textarea.field-kit-native-control,
body .field-kit-textarea {
  field-sizing: content;
  height: auto;
  max-height: min(50dvh, 480px);
  min-height: 96px;
  overflow: auto;
  line-height: 1.5;
  resize: vertical;
}

.field-kit-check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

.field-kit-check:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.field-kit-control::placeholder {
  color: var(--ui-text-placeholder);
}

.field-kit-control:disabled,
.field-kit.is-disabled .field-kit-control {
  background: var(--ui-surface-subtle);
  color: var(--muted);
  cursor: not-allowed;
}

.field-kit.is-readonly .field-kit-control,
.field-kit-control[readonly] {
  background: var(--ui-surface-subtle);
  color: var(--text);
}

.field-kit.is-error .field-kit-control {
  border-color: var(--field-error-border-color);
  box-shadow: var(--field-error-ring);
}

body select:not([data-native-select]),
body select.field-kit-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  max-height: var(--field-height, var(--form-control-height));
  padding-right: 34px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  line-height: 1.2;
  background-color: var(--ui-surface-card);
  background-image: var(--field-select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none' stroke='%2364758b' stroke-width='1.7'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  background-origin: border-box;
  background-clip: padding-box;
  box-sizing: border-box;
}

body select:not([data-native-select]):disabled,
body select.field-kit-select:disabled {
  background-color: var(--ui-surface-subtle);
  color: var(--ui-text-placeholder);
  background-image: var(--field-select-arrow-disabled, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='1.7'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
}

body select:not([data-native-select])::-ms-expand,
body select.field-kit-select::-ms-expand {
  display: none;
}

@media (max-width: 768px) {
  /*
   * mobile-ui.css уже задаёт --form-control-height/-radius/-font-size и
   * --form-label-* на этом же пороге — это и есть единственный источник
   * истины по значениям. Но этот файл подключается после mobile-ui.css и
   * выше (:root, строка ~8) содержит СВОЙ безусловный набор тех же токенов
   * под десктоп; без переопределения здесь, на этом же пороге, тот
   * безусловный блок победил бы в каскаде (он позже в исходном коде) и
   * стёр бы мобильные значения. Поэтому здесь только пробрасываем два
   * токена, которые mobile-ui.css уже вычислил (без хардкода), а
   * оставшиеся значения дублируем как заведомо синхронизированные с ним.
   */
  :root {
    --form-control-height: var(--mobile-control-height);
    --form-control-radius: var(--mobile-control-radius);
    --form-control-font-size: 16px;
    --form-label-size: 14px;
    --form-label-line-height: 20px;
    --form-field-gap: 6px;
    --form-stack-gap: 14px;
  }

  .field-kit__label-row:has(.field-kit__link, .field-kit__action, .tp-default-link) {
    height: auto;
    min-height: var(--mobile-control-height, var(--ui-control-height-touch, 44px));
    max-height: none;
  }

  .field-kit__link,
  .field-kit__action,
  .tp-default-link,
  button.field-kit__link,
  button.tp-default-link {
    flex: 0 0 auto;
    height: var(--mobile-control-height, var(--ui-control-height-touch, 44px));
    min-height: var(--mobile-control-height, var(--ui-control-height-touch, 44px));
    max-height: var(--mobile-control-height, var(--ui-control-height-touch, 44px));
    padding-inline: 8px;
    font-size: var(--ui-font-size-secondary-min, 13px);
    line-height: 1.2;
  }

  /* .field-kit__info-button — 20x20 самостоятельная icon-button без
     собственной точки увеличения зоны нажатия. Увеличиваем hit-area через
     псевдоэлемент, не трогая визуальный размер иконки. */
  .field-kit__info-button {
    position: relative;
  }

  .field-kit__info-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ui-control-height-touch, 44px);
    height: var(--ui-control-height-touch, 44px);
    transform: translate(-50%, -50%);
  }

  .field-kit__info-tooltip-portal {
    font-size: var(--ui-font-size-secondary-min, 13px);
  }
}

@media (pointer: coarse) {
  :root {
    --form-control-height: var(--ui-control-height-touch, 44px);
    --form-control-font-size: 16px;
  }
  .field-kit__link,
  .field-kit__action,
  .tp-default-link {
    min-height: 44px;
    max-height: none;
    padding-inline: 8px;
  }
  .field-kit__label-row {
    height: auto;
    min-height: 44px;
    max-height: none;
  }

  .field-kit__info-button {
    position: relative;
  }

  .field-kit__info-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ui-control-height-touch, 44px);
    height: var(--ui-control-height-touch, 44px);
    transform: translate(-50%, -50%);
  }

  .field-kit__info-tooltip-portal {
    font-size: var(--ui-font-size-secondary-min, 13px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-kit-control,
  .field-kit-native-control { transition-duration: .01ms; }
}

body .field-kit-side-button {
  height: var(--field-height, var(--form-control-height));
  min-height: var(--field-height, var(--form-control-height));
  max-height: var(--field-height, var(--form-control-height));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

body .field-kit-side-button.oc-align-btn,
body .field-kit-side-button.oc-del,
body .field-kit-side-button.oc-tpl-btn,
body .field-kit-side-button.oc-drag-handle,
body .field-kit-side-button.pm-icon-btn,
body .field-kit-side-button.processing-delete-btn {
  width: var(--field-side-button-width, var(--field-height, var(--form-control-height)));
  min-width: var(--field-side-button-width, var(--field-height, var(--form-control-height)));
  max-width: var(--field-side-button-width, var(--field-height, var(--form-control-height)));
  padding-left: 0;
  padding-right: 0;
}

/* L2: боковая кнопка-иконка поля (очистка, календарь, ±) — полноценная цель
   касания 44×44. Класс вешается эвристикой и на текстовые кнопки рядом с
   полями («Сбросить», «Добавить покупателя»), поэтому квадрат получают только
   кнопки без текста — содержимое которых единственный svg/иконка. */
@media (max-width: 768px) {
  /* Квадрат 44×44 — только кнопке, чьё единственное содержимое — svg-иконка. */
  body .field-kit-side-button:has(> svg:only-child):not(.btn) {
    width: var(--ui-tap-target, 44px);
    min-width: var(--ui-tap-target, 44px);
    max-width: var(--ui-tap-target, 44px);
    padding-left: 0;
    padding-right: 0;
  }

  /* Любая другая кнопка рядом с полем (с текстом): ширина по содержимому. */
  body .field-kit-side-button:not(:has(> svg:only-child)) {
    min-width: 0;
    max-width: none;
    white-space: nowrap;
  }
}

/* Переключатель-флажок рядом с полями формы. Определение одно на весь
   проект: у мастера поставщика («Прайс упакован в архив») и у мастера
   покупателя («Делить на части») вид обязан совпадать, а две копии правил
   разошлись бы при первой же правке. Локальные раскладки остаются в
   фичевых стилях. */
.field-toggle,
.archive-toggle {
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--ui-font-size-secondary-min, .78rem); font-weight:500; color:var(--muted);
  cursor:pointer; user-select:none;
  padding:3px 8px; border-radius:6px;
  transition:background .15s;
}
.field-toggle:hover,
.archive-toggle:hover { background:var(--ui-surface-muted); color:var(--text); }
.field-toggle input[type=checkbox],
.archive-toggle input[type=checkbox] {
  width:14px; height:14px; cursor:pointer;
  accent-color:var(--accent); margin:0;
}