/* Базовые контролы под стиль сайта. Требует tokens.css. Без классов — применяется ко всем элементам. */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh-text); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: none; font-smooth: never; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); letter-spacing: -0.01em; font-weight: var(--fw-bold); }
p { margin: 0; }
b, strong { font-weight: var(--fw-semibold); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:disabled { opacity: 0.45; cursor: default; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
svg.lucide { flex-shrink: 0; }

/* поля */
input:not([type="checkbox"], [type="radio"], [type="range"]), select, .select, textarea, .rich-edit {
  height: var(--h-md); width: 100%; min-width: 0; padding: 0 var(--sp-3);
  border: 2px solid var(--field-line); border-radius: var(--r-md); background: var(--field); color: var(--field-ink);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
}
textarea, .rich-edit { height: auto; min-height: 96px; padding: var(--sp-3); resize: vertical; }
input:hover, select:hover, .select:hover, textarea:hover, .rich-edit:hover { border-color: #ffffff; }
input:focus, select:focus, .select:focus-visible, .select[aria-expanded="true"], textarea:focus, .rich-edit:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 2px #000; }
input::placeholder, textarea::placeholder { color: #808080; font-weight: var(--fw-regular); }
[aria-invalid="true"], .invalid { border-color: var(--danger) !important; background: var(--danger-soft) !important; }

/* select: своя стрелка; .select — кнопка-список из кита панели (select, dateInput) */
select, .select {
  appearance: none; cursor: pointer; padding-right: calc(var(--sp-3) + 20px); text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center;
}

.select { display: flex; align-items: center; gap: var(--sp-2); text-align: left; }
.select .select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select .select-value.placeholder { color: #808080; }
.select .tex { width: var(--icon-sm); height: var(--icon-sm); }
.select.date { background-image: none; }
.select.date svg { width: var(--icon-sm); height: var(--icon-sm); color: #fff; }
.select.is-blocked:hover { border-color: var(--field-line); background-color: var(--field); }

/* выпадающий список и календарь: строка чата, поверх окон */
.menu { position: fixed; z-index: var(--z-menu); display: grid; gap: 2px; padding: var(--sp-1); max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--field); box-shadow: 0 0 0 2px var(--field-line), 0 0 0 4px #000; color: var(--field-ink); font-size: var(--fs-md); }
.menu [role="option"] { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-sm); padding: var(--sp-1) var(--sp-3); cursor: pointer; overflow-wrap: anywhere; }
.menu [role="option"] .tex { width: var(--icon-sm); height: var(--icon-sm); }
.menu [role="option"]:hover, .menu [role="option"].is-active { background: var(--btn-hover); text-shadow: var(--text-shadow); }
.menu [role="option"][aria-selected="true"] { color: var(--mc-yellow); }
.calendar { width: 288px; max-height: none; gap: var(--sp-2); padding: var(--sp-2); }
.calendar .cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.calendar .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar .cal-grid > span { display: grid; place-items: center; height: 24px; font-size: var(--fs-xs); color: var(--mc-gray); }
.calendar .cal-grid button { height: 32px; font-size: var(--fs-sm); color: #fff; background: var(--toast); font-variant-numeric: tabular-nums; }
.calendar .cal-grid button:hover { background: var(--btn-hover); text-shadow: var(--text-shadow); }
.calendar .cal-grid button.out { color: var(--mc-dark_gray); }
.calendar .cal-grid button.today { box-shadow: inset 0 0 0 2px var(--field-line); }
.calendar .cal-grid button[aria-pressed="true"] { background: var(--accent); box-shadow: var(--bevel-out); text-shadow: var(--text-shadow); }
.calendar .cal-grid button:disabled { opacity: 0.3; background: var(--toast); }
.calendar .cal-foot { display: flex; justify-content: flex-end; }

/* number: без системных стрелок */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* time / date */
input[type="time"], input[type="date"] { font-variant-numeric: tabular-nums; }
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* checkbox и radio */
input[type="checkbox"], input[type="radio"] {
  appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; display: inline-grid; place-content: center;
  border: 0; border-radius: var(--r-xs); background: var(--field); box-shadow: var(--bevel-in);
  transition: background var(--ease), border-color var(--ease);
}
input[type="radio"] { border-radius: var(--r-full); }
input[type="checkbox"]:hover, input[type="radio"]:hover { background: #2a2a2a; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--field); }
input[type="checkbox"]::before {
  content: ""; width: 12px; height: 12px; transform: scale(0); background: var(--accent-hover);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); transform: scale(0); background: var(--accent-hover); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }

/* switch: <input type="checkbox" role="switch"> */
input[role="switch"] { width: 40px; height: 24px; border: 0; border-radius: 0; background: var(--field); box-shadow: var(--bevel-in); place-content: center start; padding: 2px; }
input[role="switch"]::before { width: 16px; height: 16px; border-radius: 0; clip-path: none; transform: none; background: #c6c6c6; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555; }
input[role="switch"]:checked { background: #2f5a14; }
input[role="switch"]:checked::before { translate: 16px 0; background: var(--accent-hover); }

/* range */
input[type="range"] { appearance: none; width: 100%; height: 8px; border-radius: 0; background: var(--field); box-shadow: var(--bevel-in); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 20px; border-radius: 0; background: var(--btn); border: 0; box-shadow: var(--bevel-out); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 20px; border-radius: 0; background: var(--btn); border: 0; }

/* скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--btn) var(--field); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--field); }
::-webkit-scrollbar-thumb { background: var(--btn); border-radius: 0; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555; }
::-webkit-scrollbar-thumb:hover { background-color: var(--btn-hover); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
option { background: var(--field); color: var(--field-ink); }

/* код из N цифр: по полю на цифру (otpInput в ките панели) */
.otp { display: grid; grid-template-columns: repeat(var(--otp-n, 6), 1fr); gap: var(--sp-2); }
.otp input:not([type="checkbox"]) { height: var(--h-lg); padding: 0; text-align: center; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }