/* ============================================================================
   status.css — "/status".

   Source of truth: apps/editor/src/pages/resources/StatusPage.tsx. The page
   hero is PageShell/PageHero (marketing.css); the pulsing dot is the shared
   .mk-pulse-dot primitive (also marketing.css).

   Each rule is the resolved value of the Tailwind class list quoted above it;
   inline `style={{…}}` values are reproduced as-is. The four status palettes
   come from the --mk-status-* tokens, so they follow the theme.
   ========================================================================= */

/* "max-w-4xl mx-auto px-6 pb-28" */
.status {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}

/* ═══ Overall banner ═══════════════════════════════════════════════════════
   "rounded-2xl border p-6 flex items-center gap-4 mb-10 flex-wrap" with the
   background and border colour taken from the live check's state. */
.status-banner {
  border-radius: 1rem;
  border: 1px solid var(--status-bd);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  background: var(--status-bg);
}
/* The four states. `checking` is what the server renders, because that is what
   React paints before its first fetch resolves. */
.status-banner[data-state="checking"] {
  --status-fg: var(--mk-status-neutral);
  --status-bg: var(--mk-status-neutral-bg);
  --status-bd: var(--mk-status-neutral-bd);
}
.status-banner[data-state="operational"] {
  --status-fg: var(--mk-status-ok);
  --status-bg: var(--mk-status-ok-bg);
  --status-bd: var(--mk-status-ok-bd);
}
.status-banner[data-state="slow"] {
  --status-fg: var(--mk-status-warn);
  --status-bg: var(--mk-status-warn-bg);
  --status-bd: var(--mk-status-warn-bd);
}
.status-banner[data-state="down"] {
  --status-fg: var(--mk-status-err);
  --status-bg: var(--mk-status-err-bg);
  --status-bd: var(--mk-status-err-bd);
}
/* "w-3 h-3 rounded-full flex-shrink-0", plus .mk-pulse-dot when operational */
.status-banner__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--status-fg);
}
/* "min-w-0 flex-1" */
.status-banner__text { min-width: 0; flex: 1 1 0%; }
/* "text-base font-bold text-slate-900 dark:text-white" */
.status-banner__headline {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}
.mk-dark .status-banner__headline { color: #fff; }
/* "text-xs text-slate-500 mt-0.5" */
.status-banner__detail { font-size: 0.75rem; line-height: 1rem; color: #64748b; margin-top: 0.125rem; }
/* "px-3.5 py-2 rounded-lg border border-slate-300 dark:border-white/15
    text-slate-700 dark:text-slate-300 hover:text-slate-900
    dark:hover:text-white hover:border-slate-400 dark:hover:border-white/30
    text-xs font-semibold transition-colors flex-shrink-0" */
.status-banner__refresh {
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  background: none;
  font-family: inherit;
}
.status-banner__refresh:hover { color: #0f172a; border-color: #94a3b8; }
.mk-dark .status-banner__refresh { border-color: rgba(255, 255, 255, 0.15); color: #cbd5e1; }
.mk-dark .status-banner__refresh:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }

/* ═══ Component / provider rows ════════════════════════════════════════════ */

/* "flex flex-col gap-4 mb-12" */
.status-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }
/* "rounded-2xl border border-slate-200/80 dark:border-white/6 p-6 flex
    items-center justify-between gap-4" + background var(--mk-card-grad).
   `dark:border-white/6` generates no rule (6 is off Tailwind's opacity
   scale), so the slate-200/80 border stays in dark mode. */
.status-row {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--mk-card-grad);
}
/* the provider rows add "flex-wrap" */
.status-row--wrap { flex-wrap: wrap; }
/* "min-w-0" / "min-w-0 flex-1" */
.status-row__text { min-width: 0; }
.status-row__text--grow { min-width: 0; flex: 1 1 0%; }
/* "text-sm font-bold text-slate-900 dark:text-white" */
.status-row__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: #0f172a; }
.mk-dark .status-row__name { color: #fff; }
/* "text-xs text-slate-500 dark:text-slate-600 mt-0.5" (providers add leading-relaxed) */
.status-row__desc { font-size: 0.75rem; line-height: 1rem; color: #64748b; margin-top: 0.125rem; }
.mk-dark .status-row__desc { color: #475569; }
.status-row__desc--relaxed { line-height: 1.625; }
/* "flex-shrink-0" */
.status-row__aside { flex-shrink: 0; }
/* "flex-shrink-0 text-xs font-semibold text-indigo-600 dark:text-indigo-400
    hover:text-indigo-600 dark:hover:text-indigo-400" — hover equals resting,
   so there is deliberately no visible hover change. */
.status-row__link {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #4f46e5;
}
.mk-dark .status-row__link { color: #818cf8; }
/* "text-[11px] text-slate-500 dark:text-slate-600 px-1" */
.status-note { font-size: 11px; color: #64748b; padding-left: 0.25rem; padding-right: 0.25rem; }
.mk-dark .status-note { color: #475569; }

/* StatusPill: "inline-flex items-center gap-2 text-xs font-semibold" with the
   state colour, and "w-1.5 h-1.5 rounded-full" for its dot. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--status-fg);
}
.status-pill__dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--status-fg); }
/* The pills share the banner's live state, so they carry the same palette. */
.status-pill[data-state="checking"]    { --status-fg: var(--mk-status-neutral); }
.status-pill[data-state="operational"] { --status-fg: var(--mk-status-ok); }
.status-pill[data-state="slow"]        { --status-fg: var(--mk-status-warn); }
.status-pill[data-state="down"]        { --status-fg: var(--mk-status-err); }

/* ═══ Headings and closing cards ═══════════════════════════════════════════ */

/* "text-2xl font-black text-slate-900 dark:text-white tracking-tight mb-6"
   + letterSpacing -0.02em */
.status-h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.mk-dark .status-h2 { color: #fff; }
/* "rounded-2xl border border-slate-200/80 dark:border-white/6 p-6"
   + background var(--mk-card-grad) */
.status-card {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1.5rem;
  background: var(--mk-card-grad);
}
/* "text-sm text-[#444444] dark:text-slate-500 leading-relaxed" */
.status-card p { font-size: 0.875rem; color: #444; line-height: 1.625; }
.mk-dark .status-card p { color: #64748b; }
/* "mt-14" wrapper + a tinted, centred variant of the same card */
.status-outro { margin-top: 3.5rem; }
.status-outro .status-card { text-align: center; background: rgba(99, 102, 241, 0.05); }
/* "text-sm text-[#000000] dark:text-slate-400 leading-relaxed max-w-lg mx-auto" */
.status-outro .status-card p {
  color: #000;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .status-outro .status-card p { color: #94a3b8; }