/* [17: статус] Страница «Состояние сервисов» (site/status.html, site/status.js). Поверх site.css и legal.css: шапка, подвал,
   первый экран, цвета и шрифты — оттуда. CSP сайта (backend/lib/webSecurity.js SITE_CSP) — без встроенных <style> и
   style=, поэтому всё оформление здесь, тона — через атрибуты data-state и data-tone. */

.st-page [hidden] { display: none !important; }
.st-page { --st-ok: #34d399; --st-slow: #fbbf24; --st-down: #f87171; --st-none: #4a4a53; }

/* колонка слева, по краю заголовка (container), не шире 920 px */
.st-wrap { display: flex; flex-direction: column; gap: 20px; padding-top: 40px; padding-bottom: 96px; }
.st-wrap > * { width: 100%; max-width: 920px; }
@media (max-width: 720px) { .st-wrap { gap: 16px; padding-top: 24px; padding-bottom: 72px; } }

/* ---------- сводка ---------- */
.st-banner { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
/* точка — на уровне первой строки заголовка */
.st-banner-dot { flex: none; width: 14px; height: 14px; margin-top: 8px; border-radius: 50%; background: var(--st-none); }
.st-banner[data-tone="ok"] { background: radial-gradient(120% 120% at 0% 0%, rgba(52, 211, 153, 0.12), transparent 60%), var(--card); border-color: rgba(52, 211, 153, 0.3); }
.st-banner[data-tone="ok"] .st-banner-dot { background: var(--st-ok); box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.16); }
.st-banner[data-tone="slow"] { background: radial-gradient(120% 120% at 0% 0%, rgba(251, 191, 36, 0.12), transparent 60%), var(--card); border-color: rgba(251, 191, 36, 0.32); }
.st-banner[data-tone="slow"] .st-banner-dot { background: var(--st-slow); box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.16); }
.st-banner[data-tone="down"] { background: radial-gradient(120% 120% at 0% 0%, rgba(248, 113, 113, 0.14), transparent 60%), var(--card); border-color: rgba(248, 113, 113, 0.34); }
.st-banner[data-tone="down"] .st-banner-dot { background: var(--st-down); box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.16); }
.st-banner-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-banner-title { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); overflow-wrap: break-word; }
.st-banner-sub { font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 560px) { .st-banner { gap: 14px; padding: 18px 16px; border-radius: 18px; } .st-banner-sub { font-size: 14px; } }

/* ---------- полоса истории: 48 делений по 30 минут, старые слева ---------- */
.st-day { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); }
.st-day-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.st-day-title { font-size: 15px; font-weight: 600; color: var(--text); }
.st-day-uptime { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.st-day-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.st-bar { display: flex; gap: 2px; width: 100%; height: 22px; }
.st-bar--big { height: 32px; gap: 3px; }
.st-bar i { flex: 1 1 0; min-width: 1px; border-radius: 3px; background: var(--st-none); opacity: 0.55; }
.st-bar i[data-state="ok"] { background: var(--st-ok); opacity: 0.85; }
.st-bar i[data-state="slow"] { background: var(--st-slow); opacity: 0.9; }
.st-bar i[data-state="down"] { background: var(--st-down); opacity: 1; }
@media (max-width: 560px) { .st-day { padding: 16px; border-radius: 16px; } .st-bar { gap: 1px; } .st-bar--big { gap: 2px; height: 28px; } }

/* ---------- группы и строки ---------- */
.st-groups { display: flex; flex-direction: column; gap: 20px; }
.st-group { min-width: 0; border-radius: 18px; background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.st-group-title { padding: 16px 22px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.st-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 22px; }
.st-row + .st-row { border-top: 1px solid var(--hair); }
.st-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.st-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-label { font-size: 16px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.st-what { font-size: 13px; line-height: 1.45; color: var(--text-3); }
.st-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text-2); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hair); }
.st-pill .st-dot { width: 8px; height: 8px; }
.st-pill[data-state="ok"] { color: var(--st-ok); background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.26); }
.st-pill[data-state="slow"] { color: var(--st-slow); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.28); }
.st-pill[data-state="down"] { color: var(--st-down); background: rgba(248, 113, 113, 0.09); border-color: rgba(248, 113, 113, 0.3); }
.st-detail { font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.st-row .st-bar { height: 14px; margin-top: 6px; }
@media (max-width: 560px) {
  .st-group { border-radius: 16px; }
  .st-group-title { padding: 14px 16px 4px; }
  .st-row { padding: 12px 16px; }
  .st-row-head { gap: 10px; }
  .st-label { font-size: 15px; }
  .st-pill { padding: 4px 10px; font-size: 12.5px; }
}

/* ---------- обозначения и пояснение ---------- */
.st-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--st-none); }
.st-dot[data-state="ok"] { background: var(--st-ok); }
.st-dot[data-state="slow"] { background: var(--st-slow); }
.st-dot[data-state="down"] { background: var(--st-down); }
.st-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-2); }
.st-key { display: inline-flex; align-items: center; gap: 8px; }
.st-note { max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  /* только то, что не перерисовывается при каждом обновлении (группы status.js пересоздаёт раз в 30 с) */
  .st-banner, .st-day { animation: st-in 0.4s var(--ease) both; }
}
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }