/* Базовые стили — перенос из <style> прототипа. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: 'Segoe UI', 'Open Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

input, textarea, select, button { font-family: inherit; color: inherit; }
::placeholder { color: var(--ink3); }

button, input, select, textarea {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238d95a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,4 5,6.5 7.5,4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 26px !important;
}

/* Тёмная тема перекрашивает поля ввода: браузер рисует их светлыми независимо от темы
   страницы. Поля, у которых подложка своя — например прозрачное поле быстрого добавления
   внутри карточки, — исключены: иначе внутри карточки появляется светлая полоса,
   которой в макете нет. */
html[data-theme="dark"] input:not([data-surface="own"]),
html[data-theme="dark"] textarea:not([data-surface="own"]),
html[data-theme="dark"] select:not([data-surface="own"]) {
  color: var(--ink);
  background: var(--card2);
  border-color: var(--line);
}

html[data-theme="dark"] input[type="checkbox"] { accent-color: var(--accent); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

[draggable="true"]:active { cursor: grabbing; }

@keyframes tdIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tdSlide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* Подложка проявляется за то же время, что и всплывающий над ней слой: подложка,
   опоздавшая на кадр, читается как мигание экрана. */
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }