/* ═══════════════════════════════════════════════════════════
   фидоня.дети — Поля ввода, переключатели, ползунки
   ═══════════════════════════════════════════════════════════ */

/* ── 10. Поля ────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 0.75rem; font-weight: 650; color: var(--text-2); }
input.input-x, textarea.input-x, select.input-x, .input-x {
  width: 100%; padding: 11px 14px; border-radius: var(--r-1);
  font-size: 0.9rem; line-height: 1.4;
  background-color: var(--surface-2); color: var(--text-1);
  border: 1px solid var(--border-1); outline: none;
  box-shadow: var(--shadow-1) inset;
  transition: border-color var(--fast) var(--ease), box-shadow var(--base) var(--spring), background-color var(--fast);
  appearance: none; -webkit-appearance: none;
}
input.input-x::placeholder, textarea.input-x::placeholder { color: var(--text-3); opacity: 1; }
input.input-x:-webkit-autofill {
  -webkit-text-fill-color: var(--text-1);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-solid) inset;
  caret-color: var(--text-1);
}
select.input-x {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
input.input-x:focus, textarea.input-x:focus, select.input-x:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.input-x::placeholder { color: var(--text-3); }
textarea.input-x { resize: vertical; min-height: 88px; line-height: 1.55; }
.input-x[type="color"] { padding: 3px; height: 42px; cursor: pointer; background: var(--surface-2); }

.switch {
  position: relative; flex: none; width: 46px; height: 27px; border-radius: 999px;
  background: var(--switch-off); border: 1px solid var(--border-2); cursor: pointer;
  transition: background 0.28s var(--ease), border-color 0.28s;
  box-shadow: var(--shadow-1) inset;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-2), 0 0 0 1px rgba(12, 12, 28, 0.08);
  transition: transform 0.3s var(--ease);
}
.switch[data-on="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.switch[data-on="true"]::after { transform: translateX(19px); }

/* Палитра пресетов */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 11px; border: 2px solid transparent; cursor: pointer; box-shadow: var(--shadow-1); transition: transform 0.2s var(--ease), border-color 0.2s; }
.swatch:active { transform: scale(0.92); }
.swatch[data-active="true"] { border-color: var(--text-1); }

/* ── Ползунки ────────────────────────────────────────────── */
.range-x {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
.range-x::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-1) inset;
}
.range-x::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.range-x::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-2); box-shadow: var(--shadow-2);
  transition: transform 0.15s var(--ease);
}
.range-x::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-2); box-shadow: var(--shadow-2);
}
.range-x:active::-webkit-slider-thumb { transform: scale(1.15); }
.range-x:focus-visible { outline-offset: 6px; }

/* ── Панели инструментов и поиск ─────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.field-search { position: relative; }
.field-search .input-x { padding-left: 36px; }
.field-search { position: relative; display: block; }
.field-search .input-x { padding-left: 38px; }
.field-search .ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 18px; height: 18px;
  color: var(--text-3); pointer-events: none;
}
.field-search .ico svg.lucide { width: 18px; height: 18px; }

/* ── Ручка перетаскивания ────────────────────────────────── */
.drag-grip {
  display: grid; place-items: center; flex: none;
  width: 26px; align-self: stretch; min-height: 44px;
  border-radius: 8px; color: var(--text-3); cursor: grab;
  transition: background 0.2s, color 0.2s;
  touch-action: none; user-select: none;
}
.drag-grip:active { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .drag-grip:hover { background: var(--surface-2); color: var(--text-1); }
}
@media (max-width: 640px) { .drag-grip { display: none; } }

/* Текст в карточках выделяется свободно — перетаскивание живёт на ручке */
.media-row { user-select: text; -webkit-user-select: text; }
.media-row input, .media-row textarea {
  user-select: text; -webkit-user-select: text;
  -webkit-user-drag: none; touch-action: manipulation;
}
.media-row img { -webkit-user-drag: none; user-select: none; }

/* ── Свой выпадающий список ──────────────────────────────── */
.picker { position: relative; min-width: 0; }

.picker-face {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: 11px 14px;
  border-radius: var(--r-1); cursor: pointer;
  font-size: 0.9rem; line-height: 1.4; text-align: left;
  background-color: var(--surface-2); color: var(--text-1);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-1) inset;
  transition: border-color var(--fast) var(--ease), box-shadow var(--base) var(--spring);
}
.picker-face[data-open="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-chev { color: var(--text-3); flex: none; transition: transform var(--base) var(--spring); }
.picker-face[data-open="true"] .picker-chev { transform: rotate(180deg); }

.picker-menu {
  position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  padding: 5px;
  border-radius: var(--r-2);
  background: var(--glass-solid);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-4);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.picker-item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: 9px 11px;
  border: 0; border-radius: 9px; cursor: pointer;
  font-size: 0.85rem; text-align: left;
  background: transparent; color: var(--text-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.picker-item[data-active="true"] { color: var(--text-1); font-weight: 580; }
.picker-mark { opacity: 0; color: var(--accent); flex: none; display: grid; place-items: center; }
.picker-mark svg.lucide { width: 15px; height: 15px; }
.picker-item[data-active="true"] .picker-mark { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .picker-item:hover { background: var(--surface-2); color: var(--text-1); }
}

/* Системный список тоже подкрашиваем: он остался там, где
   вариантов много и своя разметка не окупается. */
select.input-x option { background: var(--surface-solid); color: var(--text-1); }
select.input-x optgroup { background: var(--surface-solid); color: var(--text-3); }