/*
 * Страница состояния сервисов.
 *
 * Типографика, палитра, шапка, подвал, кнопки и вся система движения приходят из
 * site.css: это та же площадка, и собственный визуальный язык здесь означал бы
 * второй продукт вместо одного. Ниже — только то, чего на лендинге нет.
 *
 * Состояние кодируется дважды: цветом и словом. Цвет отделён от фирменного
 * акцента намеренно — акцент в системе означает действие, а не самочувствие.
 */

:root {
  --status-good: #7bd88f;
  --status-warn: #f0c05a;
  --status-down: #ff6b6b;
}

/* ── сводка ─────────────────────────────────────────────────────────────── */

.status-hero {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px);
}

.status-hero__badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-hero__badge .eyebrow { margin: 0; }

.status-hero__ring {
  width: 44px;
  height: 44px;
  display: block;
  color: var(--status-good);
}

.status-hero[data-state="degraded"] .status-hero__ring { color: var(--status-warn); }
.status-hero[data-state="down"] .status-hero__ring { color: var(--status-down); }

.status-hero__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }

.status-hero__track {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

/*
 * Дуга обегает круг один раз при появлении ответа: движение показывает, что
 * состояние только что снято, а не нарисовано в разметке.
 */
.status-hero__sweep {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.status-hero.is-ready .status-hero__sweep {
  animation: status-sweep 900ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.status-hero__glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}

.status-hero.is-ready .status-hero__glyph {
  animation: status-check 420ms cubic-bezier(.16, 1, .3, 1) 620ms forwards;
}

/* Когда всё не в порядке, галочка неуместна: остаётся только дуга. */
.status-hero[data-state="degraded"] .status-hero__glyph,
.status-hero[data-state="down"] .status-hero__glyph { display: none; }

@keyframes status-sweep { to { stroke-dashoffset: 0; } }
@keyframes status-check { to { stroke-dashoffset: 0; } }

.status-hero__title {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Правило site.css задаёт это только для .hero__title лендинга. */
.status-hero__title .word { display: inline-block; }

.status-hero__summary {
  margin: 0;
  max-width: 52ch;
  color: var(--nagrind-muted);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.status-hero__stamp {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--nagrind-muted);
  font-variant-numeric: tabular-nums;
}

.status-hero__stamp::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── показатели ─────────────────────────────────────────────────────────── */

.status-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.status-tile {
  background: var(--nagrind-graphite);
  padding: 26px 24px;
  display: grid;
  gap: 8px;
}

.status-tile b {
  font-family: "Tektur", sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.status-tile small { color: var(--nagrind-muted); font-size: 13px; }

/* ── сервисы ────────────────────────────────────────────────────────────── */

.status-services {
  padding-block: clamp(56px, 8vw, 96px) 0;
  display: grid;
  gap: 28px;
}

.status-services h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

.status-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.status-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--nagrind-graphite);
}

.status-card--loading {
  color: var(--nagrind-muted);
  grid-column: 1 / -1;
  text-align: center;
}

/*
 * Карточки приезжают по очереди: список приходит одним ответом, но появляться
 * пачкой ему незачем. Задержка задаётся из скрипта, потому что состав списка
 * известен только после ответа.
 */
.status-card.is-armed { opacity: 0; transform: translateY(14px); }

.status-card.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms),
    transform 520ms cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms);
}

.status-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.status-card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--nagrind-accent);
  flex: none;
}

.status-card__icon svg { width: 20px; height: 20px; display: block; }

.status-card__name { display: grid; gap: 4px; }
.status-card__name strong { font-size: 1.05rem; font-weight: 700; }
.status-card__name small { color: var(--nagrind-muted); font-size: 13px; line-height: 1.5; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--status-good);
}

.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge[data-state="degraded"] { color: var(--status-warn); }
.status-badge[data-state="down"] { color: var(--status-down); }

/*
 * Пульс только у здорового: у проблемного он читался бы как «идёт работа»,
 * а идёт там не работа.
 */
.status-badge[data-state="operational"]::before {
  animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--status-good) 70%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

.status-note {
  padding-block: clamp(48px, 7vw, 84px);
}

.status-note p {
  margin: 0;
  max-width: 70ch;
  color: var(--nagrind-muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 680px) {
  .status-card { padding: 20px; }
  .status-card__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .status-hero.is-ready .status-hero__sweep,
  .status-hero.is-ready .status-hero__glyph,
  .status-badge[data-state="operational"]::before { animation: none; }

  .status-hero__sweep,
  .status-hero__glyph { stroke-dashoffset: 0; }

  .status-card.is-armed,
  .status-card.is-visible { opacity: 1; transform: none; transition: none; }
}

/*
 * Общее правило лендинга main > section:not(.hero):not(.final-cta) задаёт
 * разделам отступ --section-space и по силе перебивало отступы выше. У плиток
 * показателей фон — цвет линии, поэтому 64–112 px отступа превращались в
 * две широкие серые полосы над и под цифрами. Селектор той же силы, но ниже
 * по каскаду, возвращает странице её собственный ритм.
 */
main > section.status-hero:not(.hero) { padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px); }
main > section.status-tiles:not(.hero) { padding-block: 0; }
main > section.status-services:not(.hero) { padding-block: clamp(56px, 8vw, 96px) 0; }
main > section.status-note:not(.hero) { padding-block: clamp(48px, 7vw, 84px); }