/* ===== Unistaff UI tokens · dark-first · 08.10.2026 · источник: docs/DESIGN-SM.md §3 =====
   Один файл на кабинет, демо и виджет. Экраны цветов, радиусов и длительностей не объявляют —
   только эти переменные. Ниже токенов — базовые примитивы из DESIGN-SM §4 (строка дела, планка
   доверия, тройная галочка, чип, кнопка, скелетон), которыми пользуются все экраны. */
:root {
  /* поверхности: тёплый графит, шаг +0.03 L на уровень; теней на плитах нет */
  --graphite: #141311;      /* фон экрана */
  --plate:    #1A1916;      /* панели, строки при hover, карточка команды */
  --plate-2:  #22201C;      /* поднятая плита: пузырь клиента, модалки, выпадашки */
  --hairline: #2C2A25;      /* линейки строк, рамки полей */
  --hairline-2: #3A3731;    /* рамки на плите (hover/active поля) */

  /* текст: кость; чистый белый запрещён. bone-45 — только линии/иконки disabled, текстом запрещён */
  --bone:     #ECE7DC;
  --bone-70:  #ABA596;
  --bone-45:  #6E695F;      /* НЕ текст */

  /* акцент: стальная синь. Бюджет: ≤3 появления на вьюпорт */
  --steel:       #8FB5E3;
  --steel-hover: #A7C6EC;
  --steel-dim:   rgb(143 181 227 / .12);
  --on-steel:    #141311;

  /* состояния: мох / мёд / кирпич */
  --moss:  #7FC79A;
  --honey: #E6B85C;
  --brick: #EA7B68;
  --moss-dim:  rgb(127 199 154 / .14);
  --honey-dim: rgb(230 184 92 / .14);
  --brick-dim: rgb(234 123 104 / .14);

  /* шрифты */
  --font-ui:    "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;
  --font-voice: "Merriweather", Georgia, "Times New Roman", serif;

  /* размер: шаг 1.2, база 17px — на шаг крупнее обычного (глаза владельца) */
  --fs-13: 13px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px;
  --fs-24: 24px; --fs-30: 30px; --fs-38: 38px; --fs-48: 48px;
  --lh-tight: 1.15; --lh-ui: 1.45; --lh-read: 1.6;

  /* отступы: 4-шаг, плотность «воздушная», контролы 40px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --control-h: 40px;
  --row-h: 56px;
  --rail-w: 248px; --rail-w-min: 64px;
  --panel-w: 320px;
  --list-w: 360px;
  --drawer-w: 440px;
  --content-max: 1320px;
  --gutter: 24px;

  /* радиусы: ОДИН язык. Чипы 6, контролы 8, плиты 10, ящики 14, аватар круг */
  --r-chip: 6px; --r-ctl: 8px; --r-plate: 10px; --r-drawer: 14px; --r-round: 999px;

  /* тени: только у всплывающих слоёв */
  --shadow-pop: 0 12px 32px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .35);
  --focus: 0 0 0 2px var(--graphite), 0 0 0 4px var(--steel);

  /* движение */
  --dur-instant: 100ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-shimmer: 1400ms;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-exit:  cubic-bezier(.7, 0, .84, 0);

  /* слои */
  --z-rail: 20; --z-top: 30; --z-drawer: 40; --z-modal: 50; --z-toast: 60;
}
@media (max-width: 768px) { :root { --gutter: 16px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- база ---- */
html { background: var(--graphite); color: var(--bone); font: var(--fs-17)/var(--lh-ui) var(--font-ui); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--graphite); color: var(--bone); min-height: 100vh; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--steel); text-decoration: none; }
a:hover { color: var(--steel-hover); }
h1, h2, h3 { margin: 0; font-family: var(--font-voice); font-weight: 600; letter-spacing: 0; line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--fs-30); }
h2 { font-size: var(--fs-24); margin-top: var(--s-8); margin-bottom: var(--s-2); }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.voice { font-family: var(--font-voice); font-weight: 400; font-size: var(--fs-20); line-height: 1.5; color: var(--bone); max-width: 72ch; }
.voice a { color: var(--steel); }
.name { font-family: var(--font-voice); font-weight: 600; }
.muted { color: var(--bone-70); }
.small { font-size: var(--fs-15); }

/* ---- 4.1 строка дела ---- */
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
  min-height: var(--row-h); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline);
  color: var(--bone); text-decoration: none; background: transparent; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.row:hover { background: var(--plate); color: var(--bone); }
.row[aria-current="true"], .row[aria-current="page"] { background: var(--steel-dim); box-shadow: inset 2px 0 0 var(--steel); }
.row__mark { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; }
.row__body { min-width: 0; }
.row__title { display: block; font-weight: 600; font-size: var(--fs-17); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row__sub   { display: block; color: var(--bone-70); font-size: var(--fs-15); }
.row__meta  { color: var(--bone-70); font-size: var(--fs-15); white-space: nowrap; }
.rows { border-top: 1px solid var(--hairline); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--bone-45); }
.dot--moss { background: var(--moss); } .dot--honey { background: var(--honey); } .dot--brick { background: var(--brick); } .dot--steel { background: var(--steel); }
.row--static { cursor: default; }
.row--static:hover { background: transparent; }
@media (max-width: 480px) {
  .row { grid-template-columns: 28px minmax(0, 1fr); }
  .row__meta { grid-column: 2; white-space: normal; }
}

/* ---- 4.2 планка доверия ---- */
.rung { display: inline-flex; align-items: center; gap: 3px; }
.rung i { width: 18px; height: 5px; border-radius: 2px; background: var(--hairline-2); transform-origin: left; display: inline-block; }
.rung[data-level="0"] i:nth-child(-n+1), .rung[data-level="1"] i:nth-child(-n+2), .rung[data-level="2"] i:nth-child(-n+3) { background: var(--bone); }
.rung b { margin-left: var(--s-2); font-weight: 500; font-size: var(--fs-15); color: var(--bone-70); }
.rung.is-promoting i.just-lit { animation: rung-fill var(--dur-slow) var(--ease-out); }
@keyframes rung-fill { from { transform: scaleX(0); background: var(--steel); } to { transform: scaleX(1); } }

/* ---- 4.3 тройная галочка ---- */
.tick3 { display: inline-flex; gap: 4px; align-items: center; }
.tick3 svg { width: 14px; height: 14px; display: block; }
.tick3 [data-state="ok"] { color: var(--moss); }
.tick3 [data-state="fail"] { color: var(--brick); }
.tick3 [data-state="pending"] { color: var(--hairline-2); }
.tick3 [data-state="running"] { color: var(--bone-70); animation: tick-pulse 2s var(--ease-inout) infinite; }
.tick3 .is-drawing path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick-draw 180ms var(--ease-out) forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@keyframes tick-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---- 4.4 честный статус-чип ---- */
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-chip);
  font-size: var(--fs-15); font-weight: 500; line-height: 1; white-space: nowrap; border: 1px solid var(--bone-70); color: var(--bone-70); }
.chip--training { border-color: var(--bone-70); color: var(--bone-70); }
.chip--probation { border-color: var(--honey); color: var(--honey); background: var(--honey-dim); }
.chip--active { border-color: var(--moss); color: var(--moss); }
.chip--parked { border-color: transparent; background: var(--plate-2); color: var(--bone-70); }
.chip--retired { border-color: var(--brick); color: var(--brick); }
.chip--steel { border-color: var(--steel); color: var(--steel); }
.chip--honey { border-color: var(--honey); color: var(--honey); }
.chip--moss { border-color: var(--moss); color: var(--moss); }
.chip--brick { border-color: var(--brick); color: var(--brick); }
.chip--filter { cursor: pointer; height: 32px; padding: 0 var(--s-3); border-color: var(--hairline-2); color: var(--bone); transition: background var(--dur-fast) var(--ease-out); }
.chip--filter[aria-pressed="true"] { background: var(--steel-dim); border-color: var(--steel); color: var(--steel); }

/* ---- кнопки ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--control-h); padding: 0 var(--s-4);
  border-radius: var(--r-ctl); border: 1px solid var(--hairline-2); background: transparent; color: var(--bone); font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--plate-2); }
.btn--primary { background: var(--steel); border-color: var(--steel); color: var(--on-steel); }
.btn--primary:hover { background: var(--steel-hover); border-color: var(--steel-hover); }
.btn--danger { border-color: var(--brick); color: var(--brick); }
.btn--danger:hover { background: var(--brick-dim); }
.btn--danger-filled { background: var(--brick); border-color: var(--brick); color: var(--on-steel); }
.btn--quiet { border-color: transparent; color: var(--steel); }
.btn--quiet:hover { background: var(--steel-dim); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--block { width: 100%; }

/* ---- поля ---- */
.field { display: block; height: var(--control-h); padding: 0 var(--s-3); border-radius: var(--r-ctl); border: 1px solid var(--hairline); background: var(--plate); color: var(--bone); width: 100%; }
.field:hover { border-color: var(--hairline-2); }
.field:focus { border-color: var(--steel); }
textarea.field { height: auto; min-height: calc(var(--control-h) * 2); padding: var(--s-2) var(--s-3); resize: vertical; }
.label { display: block; font-size: var(--fs-15); color: var(--bone-70); margin-bottom: var(--s-1); }

/* ---- плита, аватар ---- */
.plate { background: var(--plate); border-radius: var(--r-plate); padding: var(--s-5); }
.plate--raised { background: var(--plate-2); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-round); background: var(--plate-2); color: var(--bone); font-weight: 600; font-size: var(--fs-17); flex: none; }
.avatar--64 { width: 64px; height: 64px; font-size: var(--fs-24); }
.avatar--online { box-shadow: 0 0 0 2px var(--steel); }

/* ---- состояния экрана: скелетон / пусто / ошибка ---- */
.skeleton { position: relative; overflow: hidden; background: var(--plate); border-radius: var(--r-chip); min-height: 1em; color: transparent; }
.skeleton::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-120%); background: var(--plate-2); animation: shimmer var(--dur-shimmer) linear infinite; }
@keyframes shimmer { to { transform: translateX(300%); } }
.empty { padding: var(--s-10) 0; display: grid; gap: var(--s-4); justify-items: start; }
.empty .voice { color: var(--bone); }
.error { padding: var(--s-5); border: 1px solid var(--brick); border-radius: var(--r-plate); background: var(--brick-dim); display: grid; gap: var(--s-3); justify-items: start; }
.error__code { font-size: var(--fs-13); color: var(--bone-70); }