/* ============================================================================
   БАЗА: нативные микроэлементы форм в едином дизайне.
   Подключается на ОБЕИХ страницах (index.html и flows.html) ПЕРЕД страничным CSS.
   Зачем: без этого браузер рисует свою начинку — спиннеры у number-полей,
   системную стрелку селекта, светлые скроллбары и светлый попап списка — и это
   выглядит как «элементы из другой библиотеки».

   ⚠️ Чего так сделать НЕЛЬЗЯ: сам выпадающий СПИСОК нативного <select> браузер
   рисует сам, кроме выбора светлой/тёмной схемы (color-scheme). Полностью
   кастомный список = свой компонент вместо <select>.
   ========================================================================== */

/* 1. color-scheme — главный рычаг: попап <select>, скроллбары, чекбоксы,
      дата-пикеры и авто-заполнение начинают рисоваться в нужной схеме. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* 2. Убираем системную начинку контролов: свои границы, фон и радиусы
      задаются в страничном CSS.
      ⚠️ Чекбоксы/радио ЗДЕСЬ НЕ сбрасываем: у них своя рисовка ниже (блок 2b),
      иначе они попадают под общую стилизацию полей (min-height 38px, рамка,
      padding) и превращаются в «вертикальную полоску». */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button {
  -webkit-appearance: none;
  appearance: none;
}

/* 2b. Чекбоксы и радио: appearance:none убирает системный вид, поэтому рисуем свои.
      Размер задаём жёстко, чтобы никакие общие правила полей их не растянули. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: var(--input-bg, #1b1b1d);
  border: 1px solid var(--border-strong, #3f3f46);
  border-radius: 4px;
  transition: background-color .12s ease, border-color .12s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--muted, #a1a1aa); }
input[type="checkbox"]:checked { background: var(--accent, #6d8dff); border-color: var(--accent, #6d8dff); }
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked { border-color: var(--accent, #6d8dff); }
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent, #6d8dff);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(109, 141, 255, .35));
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* 3. Спиннеры у числовых полей (те самые «переключатели вверх/вниз»).
      ⚠️ На самом элементе НЕЛЬЗЯ ставить appearance: textfield — Chrome тогда
      оставляет нативный вид поля вместе со спиннером. Убираем псевдоэлементы. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  display: none;
}

/* 4. Прочие системные наросты */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input::-webkit-file-upload-button,
input::file-selector-button {
  -webkit-appearance: none;
  appearance: none;
}

/* 5. Своя стрелка у <select> (appearance:none убрал системную) — цвет по теме.
      Селектор со :not([multiple]) СПЕЦИАЛЬНО специфичнее страничных правил
      (`input, select, textarea { padding: … }`), иначе шорткат padding перекрыл бы
      padding-right и текст наезжал бы на стрелку. */
select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.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 10px center;
  background-size: 12px 12px;
  padding-right: 30px;
}
:root[data-theme="light"] select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select::-ms-expand { display: none; }

/* 6. Скроллбары: тонкие, в цвет темы (Chrome/Edge/Safari + Firefox) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #3f3f46) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong, #3f3f46);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted, #a1a1aa);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:active { background: var(--muted, #a1a1aa); background-clip: content-box; }

/* 7. Чекбоксы/радио — в акценте, с нормальным размером */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent, #6d8dff);
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  flex: none;
}

/* 8. Плейсхолдеры — приглушённые, а не «серые из 90-х» */
::placeholder { color: var(--muted, #a1a1aa); opacity: .75; }

/* 9. Автозаполнение: браузер красит поля своим жёлтым — перекрываем */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text, #fafafa);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #1b1b1d) inset;
  transition: background-color 9999s ease-out 0s;
}

/* 10. Тултипы нативных валидаций — по теме */
:root { accent-color: var(--accent, #6d8dff); }