/* ══════════════════════════════════════════════════════════════
   Keln — the status page.

   A status page has one job and it is not reassurance. It is to be
   believed on the day something is broken, which means it has to be
   capable of saying so plainly — and has to have been capable of it
   yesterday too, when everything was fine.

   So: no gradients on the good state, no "all systems nominal"
   flourish, and a history bar built from real samples with visible
   gaps where no sample exists. A page that cannot show bad news is
   decoration, and readers can tell.
   ══════════════════════════════════════════════════════════════ */

/* ─── THE HEADLINE ────────────────────────────────────────────── */

.st__banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px var(--s-10);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  margin-bottom: 26px;
}
.st__bannerT { margin: 0; font-size: var(--t-3xl); font-weight: 600; letter-spacing: -.01em; }
.st__bannerD { margin: 3px 0 0; color: var(--muted); font-size: var(--t-md); }
.st__banner > div { flex: 1; min-width: 0; }

.st__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  background: var(--dim);
  box-shadow: 0 0 0 5px rgba(90, 107, 128, .12);
}
.st__banner[data-state="operational"] { border-color: var(--border-hi); }
.st__banner[data-state="operational"] .st__dot {
  background: var(--accent2);
  box-shadow: 0 0 0 5px rgba(34, 211, 166, .14);
}
.st__banner[data-state="degraded"] { border-color: rgba(255, 180, 84, .4); }
.st__banner[data-state="degraded"] .st__dot {
  background: var(--warn);
  box-shadow: 0 0 0 5px rgba(255, 180, 84, .16);
}
.st__banner[data-state="down"] { border-color: rgba(255, 107, 139, .45); }
.st__banner[data-state="down"] .st__dot {
  background: var(--hot);
  box-shadow: 0 0 0 5px rgba(255, 107, 139, .16);
}
/* The living pulse belongs to trouble, not to health. A page that
   throbs green all day teaches people to stop looking at it. */
.st__banner[data-state="down"] .st__dot,
.st__banner[data-state="degraded"] .st__dot { animation: st-pulse 1.9s ease-in-out infinite; }
@keyframes st-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .st__banner .st__dot { animation: none; }
}

.st__refresh {
  flex: none;
  padding: 9px 15px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13.5px;
  cursor: pointer;
}
.st__refresh:hover { color: var(--ink); border-color: var(--border-hi); }
.st__refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st__refresh:disabled { opacity: .5; cursor: default; }

/* ─── COMPONENTS ──────────────────────────────────────────────── */

.st__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6);
  margin-bottom: 34px;
}
.st__row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(13, 17, 23, .45);
}
.st__rowDot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  margin-top: var(--s-3);
  background: var(--dim);
}
.st__row[data-status="operational"] .st__rowDot { background: var(--accent2); }
.st__row[data-status="degraded"] .st__rowDot { background: var(--warn); }
.st__row[data-status="down"] .st__rowDot { background: var(--hot); }
.st__row[data-status="not_configured"] .st__rowDot {
  background: transparent;
  border: 1.5px solid var(--dim);
}
.st__rowBody { flex: 1; min-width: 0; }
.st__rowName { font-weight: 600; font-size: var(--t-lg); }
.st__rowNote { color: var(--muted); font-size: var(--t-base); margin-top: var(--s-1); }
.st__rowState {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: var(--s-3);
}
.st__row[data-status="operational"] .st__rowState { color: var(--accent2); }
.st__row[data-status="degraded"] .st__rowState { color: var(--warn); }
.st__row[data-status="down"] .st__rowState { color: var(--hot); }

/* ─── UPTIME ──────────────────────────────────────────────────── */

.st__uptime {
  padding: 22px var(--s-10);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  margin-bottom: 34px;
}
.st__uptimeHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}
.st__h2 { margin: 0; font-size: 17px; font-weight: 600; }
.st__pct { font-family: var(--mono); font-size: 22px; color: var(--accent2); }

/* One column per day. Days with no sample are drawn as a visible
   gap rather than filled in green — an unmeasured day is not a good
   day, and quietly colouring it is exactly the lie this page exists
   not to tell. */
.st__bar {
  display: flex;
  gap: var(--s-1);
  align-items: stretch;
  height: 42px;
  margin-bottom: 9px;
}
.st__day {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--accent2);
  opacity: .85;
}
.st__day[data-kind="partial"] { background: var(--warn); }
.st__day[data-kind="bad"] { background: var(--hot); }
.st__day[data-kind="none"] {
  background: repeating-linear-gradient(
    135deg, rgba(90,107,128,.22) 0 2px, transparent 2px 4px);
}
.st__day:hover { opacity: 1; }

.st__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.st__note { color: var(--muted); font-size: var(--t-base); margin: var(--s-7) 0 0; line-height: 1.6; }

@media (max-width: 560px) {
  .st__banner { flex-wrap: wrap; }
  .st__refresh { width: 100%; }
}