/* Знаки Державы: как SVG сидит в строке.
 *
 * Смайл вёл себя как чужой символ шрифта: съезжал по базовой линии, менялся
 * в размере от платформы, цвет не наследовал. Нарисованный знак ведёт себя как
 * часть текста — потому здесь ровно то, что делает его частью текста.
 */

.gi {
  display: inline-block;
  vertical-align: -0.145em;   /* садится на базовую линию рядом с буквами */
  flex: none;                  /* во flex-строке не сплющивается */
  color: inherit;              /* цвет берётся у текста: тема меняет знак сама */
  stroke-width: 1.5;
  transition: color var(--dur-normal) ease, transform var(--dur-normal) ease;
  position: relative;          /* независимость от псевдоэлементов hit-target */
  z-index: 2;
  pointer-events: none;        /* клики проходят к интерактивному контейнеру-хитбоксу */
}

/* Знак перед словом отделяется собственным полем, а не пробелом в разметке:
   пробел переносится и рвёт связку «знак — слово». */
.gi + span,
.gi + b,
.gi + strong { margin-left: var(--sp-1); }

/* Крутящийся знак хода работы. */
.gi-spinner { animation: gi-spin var(--dur-slow) linear infinite; transform-origin: 50% 50%; }

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

/* Пульсирующий живой статус (Радарный импульс без сжатия ядра) */
.gi-pulse {
  animation: gi-pulse var(--dur-pulse) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  transform: scale(1) !important;
  will-change: opacity, filter;
}
@keyframes gi-pulse {
  0% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 var(--green-alpha-70)); }
  50% { opacity: 0.65; transform: scale(1); filter: drop-shadow(0 0 6px var(--green-alpha-40)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 10px var(--green-alpha-04)); }
}

@media (prefers-reduced-motion: reduce) {
  .gi, .gi-spinner, .gi-pulse {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Цвет по исходу: форма говорит что, цвет — насколько хорошо. */
.gi-status-done, .gi-status-ok, .gi-status-success { color: var(--green); }
.gi-status-failed, .gi-status-error { color: var(--accent-red); }
.gi-status-running, .gi-status-active { color: var(--accent-primary); }
.gi-status-aborted, .gi-status-stopped { color: var(--text-muted); }
.gi-status-pending, .gi-status-waiting, .gi-status-idle, .gi-status-queued { color: var(--accent-amber); }
.gi-status-warning { color: var(--accent-amber); }

/* Знак в кнопке-квадрате и компактных контролах центрируется, а не болтается у края. */
.btn .gi, .btn-burger .gi, .btn-copy-snippet .gi { vertical-align: -0.18em; }
.btn.sq, .btn-icon, .icon-btn, .btn.sq.send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.btn.sq .gi, .btn-icon .gi, .icon-btn .gi {
  vertical-align: middle;
  margin: 0 auto;
}

/* Ступени взросления: от болванки до человека с переходом цвета и характера */
.stage-emoji .gi, .humanity-bar-label .gi, .gi-stage {
  vertical-align: -0.2em;
}

.gi-stage-0 { color: var(--stage-0); } /* болванка / сталь */
.gi-stage-1 { color: var(--stage-1); } /* проба / уголь */
.gi-stage-2 { color: var(--stage-2); } /* росток / жизнь */
.gi-stage-3 { color: var(--stage-3); } /* медь / кузница */
.gi-stage-4 { color: var(--stage-4); } /* сталь / лазурь */
.gi-stage-5 { color: var(--stage-5); } /* бирюза / умелец */
.gi-stage-6 { color: var(--stage-6); } /* сапфир / мастер */
.gi-stage-7 { color: var(--stage-7); } /* огонь / почти человек */
.gi-stage-8 { color: var(--stage-8); } /* человек / статус */