/*
 * Arctic Labs — Website State Override
 * /css/site-state-override.css
 *
 * Shared by all public pages that load the Website State system.
 * Imported via: <link rel="stylesheet" href="/css/site-state-override.css">
 *
 * When stateActive === false (the normal case), nothing in this file
 * affects the page at all — every rule is scoped to .al-site-state-active
 * or .al-site-state-* classes that only exist when the loader activates.
 *
 * Design: dark Arctic Labs aesthetic, cyan accents, centered full-page card.
 */

/* ── Body class applied when state is active ───────────────────────────────── */
.al-site-state-active {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #07090d;
  color: #c8d8e8;
  overflow: hidden;
}

/* Cursor reset — existing pages may override cursor globally */
.al-site-state-active,
.al-site-state-active * {
  cursor: auto !important;
}

.al-site-state-active a,
.al-site-state-active button {
  cursor: pointer !important;
}

/* ── Full-page state container ─────────────────────────────────────────────── */
.al-site-state-page {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 204, 238, 0.11), transparent 44%),
    linear-gradient(180deg, #07090d 0%, #0c0f18 100%);
}

/* ── Optional background image ─────────────────────────────────────────────── */
.al-site-state-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: saturate(0.75) contrast(1.1);
  pointer-events: none;
}

/* ── Optional background video ─────────────────────────────────────────────── */
.al-site-state-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
}

/* ── Centered content card ─────────────────────────────────────────────────── */
.al-site-state-card {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  border: 1px solid rgba(0, 204, 238, 0.22);
  background: rgba(12, 15, 24, 0.90);
  backdrop-filter: blur(4px);
  box-shadow:
    0 0 0 1px rgba(0, 204, 238, 0.04),
    0 24px 80px rgba(0, 0, 0, 0.50);
  padding: clamp(28px, 5vw, 54px);
  text-align: center;
}

/* Severity classes kept for backward-compatibility but neutralized —
   all state screens use the same Arctic Labs cyan regardless of severity. */
.al-site-state-page.al-state-warning  .al-site-state-card { border-color: rgba(0, 204, 238, 0.22); }
.al-site-state-page.al-state-critical .al-site-state-card { border-color: rgba(0, 204, 238, 0.22); }

/* ── Kicker — "ARCTIC LABS // STATE LABEL" ────────────────────────────────── */
.al-site-state-kicker {
  font-family: "IBM Plex Mono", "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #00ccee;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0.88;
}

/* Severity color overrides neutralized — kicker stays cyan for all states */
.al-site-state-page.al-state-warning  .al-site-state-kicker { color: #00ccee; }
.al-site-state-page.al-state-critical .al-site-state-kicker { color: #00ccee; }

/* ── Title ─────────────────────────────────────────────────────────────────── */
.al-site-state-card h1 {
  margin: 0 0 18px;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: clamp(28px, 6vw, 58px);
  font-weight: 600;
  line-height: 1.05;
  color: #f0f2f4;
  letter-spacing: -0.02em;
}

/* ── Message — short line ─────────────────────────────────────────────────── */
.al-site-state-message {
  font-family: "IBM Plex Mono", "Space Mono", monospace;
  font-size: clamp(13px, 2vw, 16px);
  line-height: 1.75;
  color: #c8d8e8;
  margin: 0 auto 14px;
  max-width: 580px;
  letter-spacing: 0.01em;
}

/* ── Body — longer description ────────────────────────────────────────────── */
.al-site-state-body {
  font-family: "IBM Plex Mono", "Space Mono", monospace;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(200, 216, 232, 0.55);
  margin: 0 auto 20px;
  max-width: 580px;
  letter-spacing: 0.01em;
}

/* ── CTA button ────────────────────────────────────────────────────────────── */
.al-site-state-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 11px 28px;
  border: 1px solid rgba(0, 204, 238, 0.60);
  color: #00ccee;
  text-decoration: none;
  font-family: "IBM Plex Mono", "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.18s, border-color 0.18s;
  background: transparent;
}

.al-site-state-cta:hover {
  background: rgba(0, 204, 238, 0.08);
  border-color: rgba(0, 204, 238, 0.85);
}

/* CTA severity overrides neutralized — CTA stays cyan for all states */
.al-site-state-page.al-state-warning  .al-site-state-cta { border-color: rgba(0,204,238,0.60); color: #00ccee; }
.al-site-state-page.al-state-warning  .al-site-state-cta:hover { background: rgba(0,204,238,0.08); }
.al-site-state-page.al-state-critical .al-site-state-cta { border-color: rgba(0,204,238,0.60); color: #00ccee; }
.al-site-state-page.al-state-critical .al-site-state-cta:hover { background: rgba(0,204,238,0.08); }

/* ── Footer status line ────────────────────────────────────────────────────── */
.al-site-state-footer {
  margin-top: 32px;
  font-family: "IBM Plex Mono", "Space Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(98, 112, 128, 0.50);
}

/* ── Mobile adjustments ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .al-site-state-page  { padding: 24px 16px; }
  .al-site-state-card  { padding: 28px 20px; }
  .al-site-state-kicker { margin-bottom: 16px; }
}