/* ============================================================
   makes. uptime — базовые токены. Те же имена и значения, что в
   styles.css сайта makes.digital (--fg, --bg, --line, --ease), чтобы
   интерфейс читался как часть семейства makes.
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --bg:      #ffffff;
  --bg-2:    #f5f5f7;
  --bg-3:    #ffffff;
  --fg:      #1d1d1f;
  --fg-2:    #6e6e73;
  --fg-3:    #86868b;
  --line:    rgba(0,0,0,.10);
  --line-2:  rgba(0,0,0,.16);

  --ok:    #2f9e5e;
  --warn:  #c98a2b;
  --bad:   #c0503f;
  --maint: #5b7bd5;
  --idle:  #a1a1a6;
  --empty: rgba(0,0,0,.07);

  --surface:   color-mix(in srgb, var(--fg) 4%, transparent);
  --surface-2: color-mix(in srgb, var(--fg) 7%, transparent);
  --radius: 14px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:      #000000;
  --bg-2:    #0a0a0c;
  --bg-3:    #111113;
  --fg:      #f5f5f7;
  --fg-2:    #a1a1a6;
  --fg-3:    #86868b;
  --line:    rgba(255,255,255,.12);
  --line-2:  rgba(255,255,255,.20);
  --ok:    #3fbf76;
  --warn:  #e0a443;
  --bad:   #e2685a;
  --maint: #7b98ea;
  --idle:  #6e6e73;
  --empty: rgba(255,255,255,.09);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #000000;
    --bg-2:    #0a0a0c;
    --bg-3:    #111113;
    --fg:      #f5f5f7;
    --fg-2:    #a1a1a6;
    --fg-3:    #86868b;
    --line:    rgba(255,255,255,.12);
    --line-2:  rgba(255,255,255,.20);
    --ok:    #3fbf76;
    --warn:  #e0a443;
    --bad:   #e2685a;
    --maint: #7b98ea;
    --idle:  #6e6e73;
    --empty: rgba(255,255,255,.09);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 var(--font); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.muted { color: var(--fg-3); }
.dot { color: var(--fg-3); }

/* ---------- Статус ---------- */
.st { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.st::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c, var(--idle));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--idle)) 22%, transparent);
}
.st--up { --c: var(--ok); }
.st--degraded { --c: var(--warn); }
.st--down { --c: var(--bad); }
.st--down::before { animation: pulse 1.4s var(--ease) infinite; }
.st--maintenance { --c: var(--maint); }
.st--paused, .st--pending, .st--unknown { --c: var(--idle); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .st--down::before { animation: none; } }

/* ---------- Полоска по дням ---------- */
.bars { display: flex; gap: 2px; align-items: stretch; height: 34px; }
.bars i {
  flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--empty);
  transition: transform .15s var(--ease), opacity .15s;
}
.bars i.b-ok { background: var(--ok); }
.bars i.b-warn { background: var(--warn); }
.bars i.b-bad { background: var(--bad); }
.bars i:hover { transform: scaleY(1.12); }
.bars--mini { height: 20px; gap: 1.5px; }
.bars--mini i { border-radius: 1.5px; }
.bars__legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-3); margin-top: 8px; }