/* min-width:0 — чтобы поле в колонке сетки или во флексе сжималось, а не
   распирало родителя своей собственной шириной (у <input> она около 200px). */
.vx-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.vx-field__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.vx-field__wrap{display:flex;align-items:center;gap:8px;background:var(--surface-sunken);border:1px solid var(--border-2);
  border-radius:var(--radius-md);padding:0 12px;box-shadow:var(--inset-sunken);transition:var(--transition-control)}
.vx-field__wrap:hover{border-color:var(--border-strong)}
.vx-field__wrap--focus{border-color:var(--border-accent);box-shadow:var(--inset-sunken),var(--ring)}
.vx-field__wrap--invalid{border-color:rgba(226,75,75,.6)}
.vx-field__wrap--disabled{opacity:.5}
.vx-field__input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text-1);
  height:var(--control-h);font:var(--type-body)}
/* Кольцо фокуса рисует обёртка — она со скруглением. Общее правило
   :focus-visible из base.css вешает такое же кольцо на само поле, а у поля
   скругления нет: внутри мягкого контура появляется второй, прямоугольный.
   Гасится здесь, а не в base.css: общее правило нужно всему остальному. */
.vx-field__input:focus-visible,.vx-field__area:focus-visible{box-shadow:none}
.vx-field__input::placeholder{color:var(--text-3)}
.vx-field__input--lg{height:var(--control-h-lg);font:500 16px/1 var(--font-text)}
.vx-field__input--mono{font:var(--type-mono);letter-spacing:.04em}
.vx-field__hint{font:var(--type-caption);color:var(--text-3)}
.vx-field__hint--error{color:var(--text-danger)}
.vx-field__area{flex:1;background:transparent;border:0;outline:none;color:var(--text-1);font:var(--type-body);
  resize:vertical;padding:10px 0;min-height:80px}