/* Основа. Блок `<style>` из `<helmet>` прототипа перенесён дословно —
 * ниже, под заголовком «Перенос из прототипа». Всё, что выше него,
 * добавлено здесь и появляется в разметке только под своим именем.
 *
 * Палитра вынесена в переменные, но значения в ней — те же шестнадцать
 * кодов, что стоят в прототипе. Переменная это новое имя для того же
 * цвета, а не повод его подправить.
 */

:root {
  /* Основные */
  --page: #f4f6f8;
  --surface: #fff;
  --ink: #141a21;
  --ink-muted: #5c6673;
  --ink-faint: #8b939d;
  --ink-hint: #a2a9b3;
  --ink-disabled: #b9c1cb;

  /* Границы, от светлой к тёмной */
  --line-faint: #eef1f4;
  --line: #e3e7ec;
  --line-field: #dfe4e9;
  --line-strong: #d4d9df;

  /* Синий: действие, выделение, «в работе» */
  --accent: #1f4fd8;
  --accent-hover: #1a45bd;
  --accent-bg: #e7edfc;
  --accent-bg-soft: #eef2fd;
  --row-selected: #f3f7fe;
  --row-hover: #f7f9fc;
  --field-bg: #fbfcfd;

  /* Стадии спора и роли — цвет и фон парой, как в STC() прототипа */
  --neutral: #5b6675;
  --neutral-bg: #eceff3;
  --chip-bg: #f2f4f7;
  --green: #0f6d47;
  --green-bg: #e2f2ea;
  --amber: #96580c;
  --amber-bg: #fbf1e1;
  --violet: #6b3cb5;
  --violet-bg: #efe9fa;
  --red: #a4302a;
  --red-bg: #fbeceb;
  --teal: #0f6f86;
  --teal-bg: #e3f1f4;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

/* ------------------------------------------------------------------ */
/* Перенос из прототипа: блок <style> в <helmet>, дословно             */
/* ------------------------------------------------------------------ */

html,
body {
  margin: 0;
  background: #f4f6f8;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #141a21;
}

* {
  box-sizing: border-box;
}

a {
  color: #1f4fd8;
  text-decoration: none;
}

a:hover {
  color: #1a45bd;
  text-decoration: underline;
}

input,
select,
textarea,
button {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translate(-50%, 7px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ------------------------------------------------------------------ */
/* Добавлено здесь                                                     */
/* ------------------------------------------------------------------ */

/* Точка входа приложения. В прототипе её нет: там всё жило в одном
 * дереве инструмента дизайна. */
#app {
  min-height: 100vh;
}

/* Кнопка без вида кнопки. В прототипе это повторялось на каждой такой
 * кнопке инлайном: `border:0;background:none;padding:0;cursor:pointer`. */
.plain-button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}