/* scre.me site chrome — layered over the Nocturne token sheet (nocturne.css).
   The console and all site bands read only token names; this class re-tunes
   every token to the scre.me red theme, so the same components render in
   Nocturne blurple standalone and in scre.me red here. */

.screme {
  --color-bg: oklch(0.22 0.035 20);
  --color-surface: oklch(0.28 0.04 20);
  --color-divider: color-mix(in srgb, #ede9e9 16%, transparent);
  --color-neutral-200: oklch(0.92 0.01 20);
  --color-neutral-300: oklch(0.86 0.015 20);
  --color-neutral-400: oklch(0.76 0.02 20);
  --color-neutral-500: oklch(0.66 0.025 20);
  --color-neutral-600: oklch(0.56 0.03 20);
  --color-neutral-700: oklch(0.44 0.03 20);
  --color-neutral-800: oklch(0.36 0.03 20);
  --color-neutral-900: oklch(0.26 0.03 20);
  --color-accent: oklch(0.62 0.16 22);
  --color-accent-200: oklch(0.88 0.05 22);
  --color-accent-300: oklch(0.80 0.08 22);
  --color-accent-400: oklch(0.72 0.12 22);
  --color-accent-500: oklch(0.62 0.16 22);
  --color-accent-600: oklch(0.54 0.15 22);
  --color-accent-700: oklch(0.44 0.13 22);
  --color-accent-800: oklch(0.34 0.10 22);
  --color-accent-2-600: oklch(0.56 0.12 40);
  --color-section: oklch(0.33 0.10 22);
  --color-section-glow: oklch(0.41 0.12 22);
  --font-heading: 'Unbounded', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;

  min-height: 100vh;
  color: var(--color-text);
  font-family: var(--font-body);
  background: linear-gradient(170deg, oklch(0.16 0.03 18) 0%, oklch(0.24 0.06 20) 55%, oklch(0.36 0.12 22) 100%);
  background-size: 220% 220%;
  animation: bgDrift 22s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 0% 100%; }
  100% { background-position: 100% 60%; }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .screme { animation: none; }
}

.screme a { color: var(--color-accent-400); text-decoration: none; }
.screme a:hover { color: var(--color-accent-300); }

/* — layout — */
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}

/* — top nav — */
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.brand { display: flex; align-items: center; margin-right: auto; height: 44px; }
.brand .wordmark {
  font-family: var(--font-heading); font-weight: 600; font-size: 25px;
  letter-spacing: -.02em; color: var(--color-text); line-height: 1;
}
.brand .wordmark em { font-style: normal; color: var(--color-accent-400); }
.site-nav .links { display: flex; gap: var(--space-6); align-items: center; font-size: 14px; flex-wrap: wrap; }
.site-nav .links a.nl { color: var(--color-text); }
.site-nav .links a.nl:hover { color: var(--color-accent-300); }
.site-nav .links a.nl.active { color: var(--color-accent-300); }

/* — outlined CTA buttons — */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-accent); color: var(--color-accent-300);
  background: transparent; padding: 8px 18px; border-radius: var(--radius-md);
  font-size: 14px; text-decoration: none;
}
.cta:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-300); }
.cta-lg { padding: 12px 26px; font-family: var(--font-heading); font-weight: 500; font-size: 15px; color: var(--color-accent-200); }
.cta-lg:hover { color: var(--color-accent-200); }
.cta-ghost { border-color: var(--color-divider); color: var(--color-text); }
.cta-ghost:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.cta-band { border-color: var(--color-accent-300); color: var(--color-accent-200); padding: 13px 28px; font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.cta-band:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-200); }

/* — status chips (evidence labels: live / pilot / prototype / in development / research) — */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--color-neutral-300); white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-400); flex-shrink: 0; }
.chip.ok .dot { background: oklch(0.72 0.09 155); }
.chip.dim { color: var(--color-neutral-500); }
.chip.dim .dot { background: var(--color-neutral-600); }
@media (max-width: 600px) {
  .chip { white-space: normal; align-items: flex-start; }
  .chip .dot { margin-top: 5px; }
}

/* — numbered stage / plan cards — */
.stage-card {
  background: color-mix(in srgb, var(--color-surface) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: var(--radius-md); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.stage-card .no { font-size: 11px; color: var(--color-accent-300); letter-spacing: .08em; }
.stage-card h3 { font-size: 20px; font-weight: 500; margin: 0; }
.stage-card p { font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-400); margin: 0; flex: 1; }

/* — definition rows (label / value tables without <table>) — */
.def-row {
  display: grid; grid-template-columns: 200px 1fr auto; gap: var(--space-4);
  align-items: baseline; padding: var(--space-4) 0; border-top: 1px solid var(--color-divider);
  font-size: 14.5px;
}
.def-row .k { color: var(--color-neutral-300); }
.def-row .v { color: var(--color-neutral-400); line-height: 1.55; }
@media (max-width: 720px) { .def-row { grid-template-columns: 1fr; gap: var(--space-2); } }

/* — section band + footer — */
.band { background: linear-gradient(135deg, var(--color-section), var(--color-section-glow)); }
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-6); font-size: 13px; color: var(--color-neutral-500);
  padding-top: 32px; padding-bottom: 48px;
}
.site-footer a { color: var(--color-neutral-400); }

@media (max-width: 720px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .rule { background: linear-gradient(to right, transparent, var(--color-divider) 24px, var(--color-divider) calc(100% - 24px), transparent); }
}