@layer components {

/* PostPilot — компоненты форм новой дизайн-системы (задача 8):
 * Field (+ Input, Textarea), Select, Switch, Tabs.
 *
 * Только токены src/tokens.css — 0 hex, 0 инлайн-стилей (npm run check:ui).
 * Высота контролов 44px, радиус --r-sm, рамка --line, фон --surface —
 * как договорено в брифе задачи 8.
 */

/* ── Field ──────────────────────────────────────────────────────────── */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--u-2);
}

.ui-field__label {
  font: var(--type-small-strong);
  color: var(--ink-1);
}

.ui-field__hint {
  margin: 0;
  font: var(--type-caption);
  color: var(--ink-2);
}

.ui-field__error {
  margin: 0;
  font: var(--type-caption);
  color: var(--danger);
}

/* ── Input / Textarea / Select — общий вид контрола ───────────────────
 * background-color (не шорткат background!) — иначе у <select> слетает
 * background-image с шевроном (см. комментарий в src/base.css). */

.ui-input,
.ui-textarea,
.ui-select {
  width: 100%;
  height: 44px;
  padding: 0 var(--u-4);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background-color: var(--surface);
  color: var(--ink);
  font: var(--type-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ui-input:hover:not(:disabled),
.ui-textarea:hover:not(:disabled),
.ui-select:hover:not(:disabled) {
  border-color: var(--line-strong);
}

/* Фокус как у полей платформы a1pro (@platform/tokens .ui-input): рамка акцентом
   + кольцо --accent-ring. Прозрачный outline остаётся для режима высокой
   контрастности Windows, где box-shadow не рисуется. */
.ui-input:focus-visible,
.ui-textarea:focus-visible,
.ui-select:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--ink-3);
}

/* min-height 96px, а не 44px (как у Input/Select) — Textarea по умолчанию
   многострочная (rows=4, см. Field.jsx), и 44px хватило бы ровно на одну
   строку: поле выглядело бы как обрезанный Input, а не как область для
   текста. 96px — ближайший шаг 8pt-сетки (--u-11) над «4 строки при
   line-height 1.5 (~84px) + вертикальный паддинг var(--u-3)×2»: 4 дефолтных
   ряда видны без скролла, без лишнего пустого места. Дальше поле растёт
   только вручную (resize: vertical) — авто-высота не нужна по брифу
   задачи 8. */
.ui-textarea {
  height: auto;
  min-height: 96px;
  padding: var(--u-3) var(--u-4);
  resize: vertical;
}

/* Место под собственный шеврон селекта (base.css: background-position
   right 10px center) — иначе текст длинных опций залезает под стрелку. */
.ui-select {
  padding-right: var(--u-6);
  cursor: pointer;
}

/* Ошибка поля — рамка контрола и кольцо фокуса красные. aria-invalid — и для
   поля вне Field (как у платформы: состояние берётся с самого контрола). */
.ui-field--error .ui-input,
.ui-field--error .ui-textarea,
.ui-field--error .ui-select,
.ui-input[aria-invalid="true"],
.ui-textarea[aria-invalid="true"],
.ui-select[aria-invalid="true"] {
  border-color: var(--danger);
}

.ui-field--error .ui-input:focus-visible,
.ui-field--error .ui-textarea:focus-visible,
.ui-field--error .ui-select:focus-visible,
.ui-input[aria-invalid="true"]:focus-visible,
.ui-textarea[aria-invalid="true"]:focus-visible,
.ui-select[aria-invalid="true"]:focus-visible {
  box-shadow: var(--ring-danger);
}

/* ── Switch ─────────────────────────────────────────────────────────── */

.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--u-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ui-switch__track {
  position: relative;
  display: inline-block;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  transition: background-color .15s ease, border-color .15s ease;
}

.ui-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform .15s ease, background-color .15s ease;
}

.ui-switch[aria-checked="true"] .ui-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.ui-switch[aria-checked="true"] .ui-switch__thumb {
  transform: translateX(16px);
  background: var(--accent-ink);
}

.ui-switch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}

.ui-switch:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ui-switch__label {
  font: var(--type-body);
  color: var(--ink-1);
}

/* ── Tabs ───────────────────────────────────────────────────────────── */
/* Сегмент с подчёркиванием — та же идея, что .seg в lp/landing.css, но
   на токенах компонентов (r-sm/r-xs вместо литеральных 9px/7px). */

.ui-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--u-1);
  height: var(--control-h);
  padding: var(--u-1);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.ui-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--u-2);
  height: 100%;
  padding: 0 var(--u-4);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font: var(--type-small-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ui-tabs__tab:hover {
  color: var(--ink);
}

.ui-tabs__tab--active,
.ui-tabs__tab--active:hover {
  background: var(--ink);
  color: var(--bg);
}

.ui-tabs__tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ui-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--u-1);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font: var(--type-eyebrow);
}

.ui-tabs__tab--active .ui-tabs__count {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

} /* @layer components */