/* =====================================================================
   NEXUS · Base styles
   ===================================================================== */

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-size: var(--fs-14);
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

img { max-width: 100%; display: block; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--nx-ink-300);
  border-radius: 999px;
  border: 2px solid var(--surface-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--nx-ink-400); }

/* App container */
.app-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
}

/* Card */
.nx-card {
  background: var(--surface-0);
  border: 1px solid var(--stroke-1);
  border-radius: var(--r-4);
  padding: var(--s-5);
}
.nx-card h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Kicker */
.nx-kicker {
  display: inline-block;
  padding: 3px 10px;
  background: var(--nx-teal-100);
  color: var(--nx-teal-800);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-black);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-round);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-3);
  font-weight: var(--fw-semi);
  font-size: var(--fs-13);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary   { background: var(--primary); color: #FFF; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost     { background: transparent; color: var(--ink-2); border: 1px solid var(--stroke-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger    { background: var(--nx-alert); color: #FFF; }
.btn-danger:hover { background: #DC2626; }

/* SVG icon size guard — same 14px cap pattern we hard-learned on NPS */
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Status pills */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-round);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pill.ok       { background: var(--nx-ok-100);   color: var(--nx-ok); }
.pill.warn     { background: var(--nx-warn-100); color: var(--nx-warn); }
.pill.alert    { background: var(--nx-alert-100);color: var(--nx-alert); }
.pill.info     { background: var(--nx-info-100); color: var(--nx-info); }

/* National status badges — for CS home screen */
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-round);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.status-badge::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.status-badge.normal   { background: #D1FAE5; color: var(--status-normal); }
.status-badge.watch    { background: #FEF3C7; color: var(--status-watch); }
.status-badge.elevated { background: #FED7AA; color: var(--status-elevated); }
.status-badge.critical { background: #FEE2E2; color: var(--status-critical); }

@keyframes pulse-dot { 50% { opacity: 0.35; } }

/* Fade-in-up motion */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.reveal { animation: fadeInUp 500ms var(--ease-out) both; }