/* ==========================================================================
   StormXI — Error Console (400 / 403 / 404 / 500)
   Broadcast-control-room diagnostics screen. One template, four states via
   [data-code] on .err-console. Uses --sx-* tokens from stormxi-tokens.css.
   ========================================================================== */

html, body {
  height: 100%;
  overflow: hidden;
}

.err-stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sx-sp-4);
  padding: var(--sx-sp-6);
  background: var(--sx-bg-shell);
}

/* --- Backdrop: engineering grid + slow scan --------------------------------- */
.err-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--sx-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--sx-border) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 0%, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}
.err-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--sx-teal-subtle), transparent);
  height: 140px;
  opacity: 0.5;
  pointer-events: none;
  animation: err-scan 7s linear infinite;
}
@keyframes err-scan {
  0%   { transform: translateY(-160px); }
  100% { transform: translateY(100vh); }
}

/* --- Console shell ---------------------------------------------------------- */
.err-console {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  background: var(--sx-surface);
  border: var(--sx-hairline) solid var(--sx-border-strong);
  border-radius: var(--sx-radius-lg);
  box-shadow: var(--sx-shadow-overlay);
}
/* Larger corner ticks on the console itself */
.err-console.sx-ticks::before,
.err-console.sx-ticks::after { width: 14px; height: 14px; border-color: var(--sx-gold-border); }

.err-console-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sx-sp-3) var(--sx-sp-5);
  background: var(--sx-surface-2);
  border-bottom: var(--sx-hairline) solid var(--sx-border);
  border-radius: var(--sx-radius-lg) var(--sx-radius-lg) 0 0;
}
.err-brand { display: flex; align-items: center; gap: var(--sx-sp-3); }
.err-mark { width: 34px; height: 34px; color: var(--sx-text); display: block; }
.err-wordmark {
  font-family: var(--sx-font-data);
  font-size: var(--sx-fs-lg);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--sx-text);
}
.err-wordmark span { color: var(--sx-gold); }

.brand-tagline {
  font-family: var(--sx-font-data);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}

.err-linkstat { display: flex; align-items: center; gap: var(--sx-sp-3); }
.err-carrier {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-sp-2);
  font-family: var(--sx-font-data);
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sx-danger);
  padding: 3px var(--sx-sp-2);
  border: var(--sx-hairline) solid var(--sx-danger);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-danger-subtle);
}
.err-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sx-danger); animation: err-blink 1.4s steps(2, jump-none) infinite; }
@keyframes err-blink { 50% { opacity: 0.25; } }

/* --- Console body: plate + detail ------------------------------------------- */
.err-console-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
}

/* Status plate */
.err-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sx-sp-2);
  padding: var(--sx-sp-7) var(--sx-sp-5);
  background:
    radial-gradient(circle at 50% 42%, var(--sx-teal-subtle), transparent 62%),
    var(--sx-inset);
  border-right: var(--sx-hairline) solid var(--sx-border);
  overflow: hidden;
}
.err-plate.sx-ticks::before,
.err-plate.sx-ticks::after { width: 10px; height: 10px; border-color: var(--sx-border-strong); }

.err-plate-corner {
  position: absolute;
  top: var(--sx-sp-3);
  font-family: var(--sx-font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--sx-text-3);
}
.err-plate-corner.tl { left: var(--sx-sp-4); }
.err-plate-corner.tr { right: var(--sx-sp-4); color: var(--sx-teal); }

.err-signal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 120px;
  transform: translateY(-40%);
  opacity: 0.9;
  pointer-events: none;
}
.err-wave {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: err-trace 3.6s var(--sx-ease) infinite;
  filter: drop-shadow(0 0 3px var(--sx-teal-subtle));
}
@keyframes err-trace {
  0%   { stroke-dashoffset: 620; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0.9; }
}

.err-code {
  position: relative;
  z-index: 1;
  font-family: var(--sx-font-data);
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--sx-text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.err-code::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: var(--sx-sp-3) auto 0;
  background: var(--sx-gold);
}
.err-code-label { position: relative; z-index: 1; color: var(--sx-text-2); margin-top: var(--sx-sp-2); }

/* Detail column */
.err-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sx-sp-3);
  padding: var(--sx-sp-7) var(--sx-sp-6);
}
.err-tag { color: var(--sx-gold); }
.err-title {
  font-family: var(--sx-font-ui);
  font-size: var(--sx-fs-3xl);
  font-weight: 700;
  line-height: var(--sx-lh-tight);
  color: var(--sx-text);
  margin: 0;
}
.err-msg {
  font-size: var(--sx-fs-md);
  line-height: var(--sx-lh-base);
  color: var(--sx-text-2);
  margin: 0;
  max-width: 46ch;
}

/* Linkbar */
.err-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sx-sp-2);
  margin-top: var(--sx-sp-3);
}
.err-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-sp-2);
  height: 38px;
  padding: 0 var(--sx-sp-4);
  font-family: var(--sx-font-ui);
  font-size: var(--sx-fs-md);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--sx-radius);
  border: var(--sx-hairline) solid transparent;
  transition: all var(--sx-dur) var(--sx-ease);
  white-space: nowrap;
}
.err-btn i { font-size: 16px; }
.err-btn-primary { background: var(--sx-gold); color: var(--sx-text-inverse); border-color: var(--sx-gold); }
.err-btn-primary:hover { background: var(--sx-gold-hover); border-color: var(--sx-gold-hover); }
.err-btn-ghost { background: transparent; color: var(--sx-text); border-color: var(--sx-border-strong); }
.err-btn-ghost:hover { border-color: var(--sx-gold); color: var(--sx-gold); background: var(--sx-gold-subtle); }
.err-btn-link { background: transparent; color: var(--sx-text-2); padding: 0 var(--sx-sp-2); }
.err-btn-link:hover { color: var(--sx-teal); }

/* --- HUD strip -------------------------------------------------------------- */
.err-hud {
  display: flex;
  align-items: center;
  gap: var(--sx-sp-2);
  padding: var(--sx-sp-3) var(--sx-sp-5);
  background: var(--sx-inset);
  border-top: var(--sx-hairline) solid var(--sx-border);
  border-radius: 0 0 var(--sx-radius-lg) var(--sx-radius-lg);
}
.err-hud-cell { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.err-hud-val {
  font-family: var(--sx-font-data);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.err-hud-div { width: 1px; align-self: stretch; background: var(--sx-border); }

/* --- Report line ------------------------------------------------------------ */
.err-report {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sx-sp-2);
  margin: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-text-3);
}
.err-report i { color: var(--sx-warning); font-size: 15px; }
.err-report a { color: var(--sx-text-2); text-decoration: none; border-bottom: 1px solid var(--sx-border-strong); padding-bottom: 1px; }
.err-report a:hover { color: var(--sx-gold); border-color: var(--sx-gold); }

/* ==========================================================================
   LAUNCH VARIANT — pre-launch "coming soon" state (gold-led, anticipatory)
   Indexable by design: this page IS the public site until launch — no
   noindex, just a hard content gate. Wire the redirect in Django middleware
   (allow /static/, /robots.txt, /sitemap.xml through; send everything else
   here while LAUNCHED=False), not in this template.
   ========================================================================== */
.lnc-carrier { color: var(--sx-gold); border-color: var(--sx-gold); background: var(--sx-gold-subtle); }
.lnc-dot { background: var(--sx-gold); animation: none; }

.lnc-emblem {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--sx-hairline) solid var(--sx-border-strong);
  border-radius: var(--sx-radius-lg);
  background: var(--sx-surface);
  color: var(--sx-gold);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.lnc-emblem i { font-size: 42px; }
.lnc-emblem::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--sx-border);
  border-radius: var(--sx-radius);
  animation: err-rotate 24s linear infinite;
}

.lnc-countdown {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sx-sp-3);
  margin-top: var(--sx-sp-5);
}
.lnc-cd-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 46px; }
.lnc-cd-num {
  font-family: var(--sx-font-data);
  font-size: var(--sx-fs-2xl);
  font-weight: 700;
  color: var(--sx-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lnc-cd-label {
  font-family: var(--sx-font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}

/* Notify form */
.lnc-notify {
  display: flex;
  align-items: stretch;
  gap: var(--sx-sp-2);
  margin-top: var(--sx-sp-3);
  max-width: 420px;
}
.lnc-notify-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sx-sp-2);
  height: 42px;
  padding: 0 var(--sx-sp-3);
  background: var(--sx-inset);
  border: var(--sx-hairline) solid var(--sx-border);
  border-radius: var(--sx-radius);
  transition: border-color var(--sx-dur) var(--sx-ease);
}
.lnc-notify-field:focus-within { border-color: var(--sx-gold); }
.lnc-notify-field i { color: var(--sx-text-3); font-size: 16px; }
.lnc-notify-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sx-font-ui);
  font-size: var(--sx-fs-md);
  color: var(--sx-text);
}
.lnc-notify-field input::placeholder { color: var(--sx-text-3); }
.lnc-notify-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-sp-2);
  height: 42px;
  padding: 0 var(--sx-sp-4);
  font-family: var(--sx-font-ui);
  font-size: var(--sx-fs-md);
  font-weight: 600;
  color: var(--sx-text-inverse);
  background: var(--sx-gold);
  border: var(--sx-hairline) solid var(--sx-gold);
  border-radius: var(--sx-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sx-dur) var(--sx-ease);
}
.lnc-notify-submit:hover { background: var(--sx-gold-hover); border-color: var(--sx-gold-hover); }
.lnc-notify-submit:disabled { opacity: 0.6; cursor: default; }
.lnc-notify-error {
  margin-top: var(--sx-sp-2);
  font-size: var(--sx-fs-xs);
  color: var(--sx-danger);
  min-height: 1em;
}
.lnc-notify-success {
  display: none;
  align-items: center;
  gap: var(--sx-sp-2);
  margin-top: var(--sx-sp-3);
  padding: var(--sx-sp-3) var(--sx-sp-4);
  background: var(--sx-success-subtle);
  border: var(--sx-hairline) solid var(--sx-success);
  border-radius: var(--sx-radius);
  color: var(--sx-success);
  font-size: var(--sx-fs-sm);
  max-width: 420px;
}
.lnc-notify-success.is-shown { display: flex; }
.lnc-notify.is-hidden { display: none; }

@media (max-width: 720px) {
  .lnc-emblem { width: 80px; height: 80px; }
  .lnc-emblem i { font-size: 36px; }
  .lnc-countdown { gap: var(--sx-sp-2); }
  .lnc-cd-cell { min-width: 40px; }
  .lnc-cd-num { font-size: var(--sx-fs-xl); }
  .lnc-notify { flex-direction: column; }
  .lnc-notify-submit { justify-content: center; }
}

/* --- State accents (drive the plate freq + accent per code) ----------------- */
.err-console[data-code="500"] .err-code::after,
.err-console[data-code="400"] .err-code::after { background: var(--sx-danger); }
.err-console[data-code="403"] .err-code::after { background: var(--sx-warning); }

/* ==========================================================================
   MAINTENANCE VARIANT — planned "broadcast paused" state (teal-led, calm)
   ========================================================================== */
.mnt-carrier { color: var(--sx-teal); border-color: var(--sx-teal); background: var(--sx-teal-subtle); }
.mnt-dot { background: var(--sx-teal); }

/* Maintenance emblem in place of the giant code */
.mnt-emblem {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--sx-hairline) solid var(--sx-border-strong);
  border-radius: var(--sx-radius-lg);
  background: var(--sx-surface);
  color: var(--sx-teal);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.mnt-emblem i { font-size: 46px; }
.mnt-emblem::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--sx-border);
  border-radius: var(--sx-radius);
  animation: err-rotate 24s linear infinite;
}
@keyframes err-rotate { to { transform: rotate(360deg); } }
@keyframes err-spin { to { transform: rotate(360deg); } }

/* Progress block */
.mnt-progress {
  margin-top: var(--sx-sp-2);
  padding: var(--sx-sp-3) var(--sx-sp-4);
  background: var(--sx-inset);
  border: var(--sx-hairline) solid var(--sx-border);
  border-radius: var(--sx-radius);
  max-width: 380px;
}
.mnt-progress-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sx-sp-2); }
.mnt-pct { font-family: var(--sx-font-data); font-size: var(--sx-fs-md); font-weight: 700; color: var(--sx-teal); }
.mnt-bar { height: 6px; background: var(--sx-surface-3); border-radius: var(--sx-radius-sm); overflow: hidden; }
.mnt-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sx-teal), var(--sx-teal));
  border-radius: var(--sx-radius-sm);
  transition: width 1.2s var(--sx-ease);
  position: relative;
}
.mnt-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: err-sheen 2.2s var(--sx-ease) infinite;
}
@keyframes err-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.mnt-eta { margin-top: var(--sx-sp-2); }

@media (max-width: 720px) {
  .mnt-progress { max-width: none; }
  .mnt-emblem { width: 80px; height: 80px; }
  .mnt-emblem i { font-size: 38px; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html, body { overflow: auto; }
  .err-stage { padding: var(--sx-sp-4); justify-content: flex-start; padding-top: var(--sx-sp-6); }
  .err-console-body { grid-template-columns: 1fr; }
  .err-plate {
    border-right: none;
    border-bottom: var(--sx-hairline) solid var(--sx-border);
    padding: var(--sx-sp-6) var(--sx-sp-4);
  }
  .err-code { font-size: 64px; }
  .err-detail { padding: var(--sx-sp-5) var(--sx-sp-4); text-align: left; }
  .err-title { font-size: var(--sx-fs-2xl); }
  .err-links { flex-direction: column; align-items: stretch; }
  .err-btn { justify-content: center; height: 42px; }
  .err-hud { flex-wrap: wrap; gap: var(--sx-sp-3) var(--sx-sp-2); }
  .err-hud-cell { flex: 1 1 40%; }
  .err-hud-div { display: none; }
  .err-console-hd { padding: var(--sx-sp-3) var(--sx-sp-4); }
}

@media (max-width: 400px) {
  .err-code { font-size: 52px; }
  .err-wordmark { font-size: var(--sx-fs-md); }
  .err-carrier { font-size: 9px; }
}


/* color modifiers (extracted from inline) */
.err-plate-corner.gold { color: var(--sx-gold); }
.err-plate-corner.teal { color: var(--sx-teal); }
.err-tag.gold { color: var(--sx-gold); }
.err-tag.teal { color: var(--sx-teal); }
.err-hud-val.gold { color: var(--sx-gold); }
.err-hud-val.teal { color: var(--sx-teal); }
.err-hud-val.success { color: var(--sx-success); }
.err-report i.gold { color: var(--sx-gold); }
.err-report i.teal { color: var(--sx-teal); }
.mnt-eta .eta-val { color: var(--sx-text); }