/* Поля ввода, переключатели, выбор оценки. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 14px; line-height: 20px; font-weight: 500; }
.hint { font-size: 13px; line-height: 18px; color: var(--muted); }
.hint--error { color: var(--danger); }

.input {
  width: 100%; height: 42px; padding: 0 14px;
  background: var(--card); border-radius: var(--r-pill); box-shadow: var(--ring);
  font-size: 16px; line-height: 22px; outline: 0; /* на телефоне строго 16px: при меньшем iPhone увеличивает страницу */
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.input::placeholder { color: var(--faint); }
.input:focus, .input:focus-visible { outline: 0; box-shadow: var(--ring-focus); }
.input[aria-invalid="true"] { box-shadow: var(--ring-danger); }
.input:disabled { background: var(--surface); color: var(--faint); box-shadow: var(--ring-inset); cursor: not-allowed; }
/* многострочное поле растёт само (app.js), системный «уголок» убран */
textarea.input { height: auto; min-height: 108px; max-height: 280px; padding: 10px 14px; border-radius: var(--r-inner); resize: none; }
/* широкий экран: плотность кабинета ElevenLabs — поле 36px, текст 14px */
@media (min-width: 768px) {
  .input { height: 36px; padding: 0 12px; font-size: 14px; line-height: 20px; }
  textarea.input { min-height: 92px; padding: 8px 12px; }
}

/* то, что браузеры дорисовывают сами: автозаполнение, «глазик», стрелочки числа */
.input:-webkit-autofill, .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--card) inset, var(--ring);
}
.input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--card) inset, var(--ring-focus); }
.input::-ms-reveal, .input::-ms-clear { display: none; }
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-inner-spin-button, .input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input[type="search"]::-webkit-search-cancel-button, .input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.input-wrap { position: relative; }
.input-wrap > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-wrap > .input { padding-left: 38px; }

/* большая строка поиска */
.search {
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 5px 0 16px;
  background: var(--card); border-radius: var(--r-pill);
  box-shadow: var(--ring), 0 10px 30px rgba(0, 0, 0, .06);
  transition: box-shadow .15s var(--ease);
}
.search:focus-within { box-shadow: var(--ring-focus), 0 10px 30px rgba(0, 0, 0, .06); }
.search > .icon { color: var(--muted); }
.search__input { flex: 1; min-width: 0; height: 100%; font-size: 16px; outline: 0; -webkit-appearance: none; appearance: none; }
@media (min-width: 768px) { .search { height: 48px; padding: 0 4px 0 16px; } .search__input { font-size: 14px; } }
.search__input:focus-visible { outline: 0; }
.search__input::placeholder { color: var(--faint); }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* переключатель */
.switch { position: relative; display: inline-flex; flex: none; width: 40px; height: 24px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.switch span { width: 100%; height: 100%; border-radius: var(--r-pill); background: var(--surface-2); transition: background-color .2s var(--ease); }
.switch span::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .25s var(--ease-ios);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }

/* строка выбора: радио, галочка или пункт списка */
.option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 4px; cursor: pointer; font-size: 15px; text-align: left; --press: .99; }
@media (min-width: 768px) { .option { min-height: 40px; font-size: 14px; } }
.option + .option { border-top: 1px solid var(--line); }
.option input { position: absolute; opacity: 0; }
.option__mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-left: auto;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  display: grid; place-items: center; color: transparent;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.option__mark--box { border-radius: 6px; }
.option input:checked ~ .option__mark, .option[aria-selected="true"] .option__mark { background: var(--brand); box-shadow: none; color: var(--on-brand); }
.option input:focus-visible ~ .option__mark { outline: 2px solid var(--text); outline-offset: 2px; }

/* выпадающий список (select.js): на широком экране — меню под полем, на телефоне — шторка */
.select { position: relative; }
.select__native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__trigger.is-placeholder .select__value { color: var(--faint); }
.select__chevron { color: var(--muted); transition: transform .2s var(--ease); }
.select.is-open .input.select__trigger { box-shadow: var(--ring-focus); }
.select.is-open .select__chevron { transform: rotate(180deg); }
/* тот же список, но с кнопкой вместо поля (например язык в шапке) */
.select--inline { display: inline-flex; }
.btn.select__trigger { gap: 6px; }
.btn.select__trigger .select__chevron { width: 14px; height: 14px; color: inherit; }
.select.is-open > .btn--outline { background: var(--surface); }
/* вид меню общий (.menu в surfaces.css); здесь только положение: под полем, по его ширине */
.select__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); pointer-events: none; }
.select--right .select__menu { left: auto; width: max-content; transform-origin: top right; }
.select--right.select--up .select__menu { transform-origin: bottom right; }
.select--up .select__menu { top: auto; bottom: calc(100% + 4px); transform-origin: bottom center; }
.select.is-open .select__menu { pointer-events: auto; }

/* зона загрузки фото */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 84px; padding: 14px;
  border: 1.5px dashed var(--brand); border-radius: var(--r-inner);
  background: var(--brand-tint); color: var(--brand-ink);
  font-size: 14px; font-weight: 500; text-align: center; cursor: pointer;
  --press: .98;
}
.dropzone small { font-size: 12px; font-weight: 400; opacity: .8; }

/* выбор оценки звёздами */
.star-input { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.star-input__row { display: flex; gap: 6px; }
.star-input__star { width: 40px; height: 40px; display: grid; place-items: center; color: var(--star-empty); border-radius: 50%; --press: .8; }
.star-input__star.is-on { color: var(--stars-on, var(--star)); }
.star-input__label { font-size: 14px; line-height: 20px; color: var(--muted); min-height: 20px; }
.star-input.is-set .star-input__label { color: var(--text); font-weight: 500; }
.star-input.is-error { animation: shake .4s var(--ease); }
.star-input.is-error .star-input__label { color: var(--danger); }