/**
 * Rubick design tokens + base typography.
 *
 * Direction: "PHOSPHOR" — instrument-panel futurism. The logo is a
 * hand-drawn cream eye on deep forest; the site is the instrument that eye
 * looks through. A near-black forest field, the logo's cream as the live
 * signal color (phosphor on a dark instrument), brass kept only as warm
 * heat on CTAs and hovers. Hairline borders, tight radii, mono uppercase
 * micro-labels. Simple, dark, precise.
 *
 * Typography:
 *   Display = Unbounded   (rounded-wide, futuristic; its blobby geometry
 *                          rhymes with the hand-drawn mark. Cyrillic ✓)
 *   Body    = Manrope     (clean geometric grotesque. Cyrillic ✓)
 *   Mono    = JetBrains Mono (technical labels, indices, prompts. Cyrillic ✓)
 *
 * Atmosphere:
 *   - flat tonal depth only (top lifts a touch, bottom sinks) — NO glow
 *     blooms, NO grids (both removed by request in earlier passes)
 *   - a single 1px cream "horizon" hairline at the very top of the viewport
 *   - fine cool digital noise
 *
 * Variable names kept as --ner-* for backward-compat with the codebase.
 * The values changed. The aesthetic changed. The names didn't.
 */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@300..700&family=Manrope:wght@400..800&family=JetBrains+Mono:wght@400..600&display=swap");

:root {
  /* ---------- color tokens ---------- */
  --ner-bg: #0d130e; /* near-black forest — page base */
  --ner-bg-warmest: #182219; /* lifted forest, atmospheric layer only */
  --ner-surface: #121a13; /* card / panel — barely lifted */
  --ner-surface-2: #1a241b; /* nested or hover */
  --ner-line: rgba(246, 241, 216, 0.09); /* hairline border (transparent cream) */
  --ner-line-strong: rgba(246, 241, 216, 0.2); /* prominent border */
  --ner-text: #f6f1d8; /* the logo's cream — primary, and the signal color */
  --ner-text-muted: #a9ac8f; /* secondary text */
  --ner-text-dim: #6e745e; /* tertiary, metadata, captions */

  /* signature accent: warm brass — demoted to CTA heat + hover warmth */
  --ner-fire: #d9b782;
  --ner-fire-hot: #f4d9a4; /* bright on hover — almost cream */
  --ner-fire-deep: #8a6e45; /* shadow side */
  --ner-fire-glow: rgba(217, 183, 130, 0.24);

  /* counter-accent: sage / botanical mid-tone */
  --ner-sky: #7da08c;
  --ner-sky-deep: #4d6356;

  /* highlight: the logo cream when used as a fill or ring */
  --ner-parchment: #f6f1d8;
  --ner-signal-glow: rgba(246, 241, 216, 0.16);

  /* utility */
  --ner-error: #e07856; /* terracotta — same warm family */
  --ner-success: #9fc28e; /* lighter sage */

  /* ---------- type ---------- */
  --ner-font-display:
    "Unbounded", "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ner-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ner-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display defaults. Unbounded is WIDE — never track it tight. */
  --ner-display-wght: 500;
  --ner-display-tight: -0.01em;
  --ner-display-tracking-loose: 0.08em; /* for caps eyebrows */

  /* ---------- spacing & radii (sharper than the last era) ---------- */
  --ner-radius-sm: 4px;
  --ner-radius-md: 8px;
  --ner-radius-lg: 12px;
  --ner-radius-xl: 16px;

  /* ---------- motion ---------- */
  --ner-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* assertive ease-out */
  --ner-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ner-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- shadows ---------- */
  --ner-shadow-card: 0 1px 0 rgba(246, 241, 216, 0.05) inset, 0 24px 60px -32px rgba(0, 0, 0, 0.75);
  --ner-shadow-card-hover:
    0 1px 0 rgba(246, 241, 216, 0.09) inset, 0 40px 80px -32px rgba(0, 0, 0, 0.85),
    0 0 0 1px var(--ner-signal-glow);
}

/* ---------------- base reset & typography ---------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--ner-bg);
  color: var(--ner-text);
  font-family: var(--ner-font-body);
  font-weight: 450;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Headings default to the display face. Unbounded runs wide and loud, so
 * headings size DOWN relative to the old system and never track tight. */
h1,
h2,
h3 {
  font-family: var(--ner-font-display);
  font-weight: 500;
  letter-spacing: var(--ner-display-tight);
  line-height: 1.08;
  margin: 0;
}

/* Unbounded has no italics — emphasis comes from weight + color instead. */
em,
i {
  font-style: normal;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Mono utility class for technical metadata, indices, prompts */
.ner-mono {
  font-family: var(--ner-font-mono);
  font-size: 0.78em;
  letter-spacing: 0;
}

/* Brand mark: an image-backed square that lives in the top-left corner of
 * every page. Page-specific stylesheets control size + radius + shadow;
 * this just makes the image fill its container correctly. */
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------- atmosphere ---------------- */
/* Two fixed layers:
 * - ::before — a 1px cream horizon hairline pinned to the very top of the
 *   viewport (the one "instrument" detail every page shares), over a flat
 *   tonal depth shift: lifted at the top, sinking at the bottom. No glow
 *   blooms, no grids — both were removed by request and stay gone.
 * - ::after — fine cool digital noise so the dark field never goes flat. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    linear-gradient(180deg, rgba(246, 241, 216, 0.22) 0, transparent 1px),
    linear-gradient(
      172deg,
      rgba(24, 34, 25, 0.55) 0%,
      transparent 34%,
      transparent 68%,
      rgba(5, 9, 6, 0.6) 100%
    );
}

/* Digital noise — finer than film grain, cream-tinted, very quiet. */
body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.38;
  mix-blend-mode: overlay;
}

/* Make sure page content sits above the atmospheric layers. */
body > * {
  position: relative;
  z-index: 1;
}

/* ---------------- shared utilities ---------------- */

/* Hairline divider — flat cream signal line with faded ends. */
.ner-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(246, 241, 216, 0.38) 14%,
    rgba(246, 241, 216, 0.38) 86%,
    transparent 100%
  );
  opacity: 0.6;
  border: 0;
}

/* Eyebrow: small mono uppercase label. Used everywhere for category /
 * section / index annotations. */
.ner-eyebrow {
  font-family: var(--ner-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ner-text-muted);
  font-weight: 500;
}

/* Index numeral — "01 /" style metadata prefix. */
.ner-index {
  font-family: var(--ner-font-mono);
  font-weight: 500;
  color: var(--ner-fire);
  letter-spacing: 0;
}

/* Staggered page-load reveal. Apply with --i set on each child.
   Default state is visible so PostHog/rrweb's initial snapshot captures the
   final styles (CSS animations don't replay reliably inside the rrweb iframe).
   The hidden start state lives behind `html.reveal-pending`, which i18n.js
   adds in <head> and removes on DOMContentLoaded — the class removal is a
   captured DOM mutation, so the transition fires correctly during replay. */
.ner-reveal > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--ner-ease),
    transform 0.7s var(--ner-ease);
  transition-delay: calc(70ms * var(--i, 0));
}

html.reveal-pending .ner-reveal > * {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}

/* Pulse — subtle breathing for brand marks and "active" indicators */
@keyframes ner-pulse {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

/* Live dot — small pulsing cream phosphor dot, used as "ready" indicator */
.ner-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ner-parchment);
  box-shadow: 0 0 12px var(--ner-signal-glow);
  animation: ner-pulse 2.2s ease-in-out infinite;
}

/* Focus ring: keyboard only, cream signal, intentional. */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--ner-parchment);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Selection — cream phosphor over the dark field. */
::selection {
  background: var(--ner-parchment);
  color: var(--ner-bg);
}

/* ---------------- floating language picker (auto-mounted by i18n.js) ---------------- */
/* Fixed control at the bottom-right of every page. Click → upward dropdown
 * with the three supported languages. Squared-off instrument styling. */

.rubick-langpicker {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 19; /* below user widget (20) + sign-in modal (100); above content */
  font-family: var(--ner-font-body);
}

/* ---------- trigger ---------- */
.rubick-langpicker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  background: rgba(13, 19, 14, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--ner-line);
  border-radius: var(--ner-radius-md);
  color: var(--ner-text);
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    border-color 0.22s var(--ner-ease),
    background 0.22s var(--ner-ease),
    box-shadow 0.22s var(--ner-ease);
}
.rubick-langpicker-trigger:hover {
  border-color: var(--ner-line-strong);
  background: rgba(22, 31, 23, 0.9);
}
.rubick-langpicker.open .rubick-langpicker-trigger {
  border-color: var(--ner-parchment);
  background: rgba(22, 31, 23, 0.96);
  box-shadow: 0 0 0 1px var(--ner-signal-glow);
}
.rubick-langpicker-trigger svg {
  color: var(--ner-parchment);
  flex-shrink: 0;
}
.rubick-langpicker-trigger-native {
  font-weight: 500;
}
.rubick-langpicker-chevron {
  font-size: 0.7rem;
  color: var(--ner-text-muted);
  transition: transform 0.22s var(--ner-ease);
}
.rubick-langpicker.open .rubick-langpicker-chevron {
  transform: rotate(180deg);
  color: var(--ner-parchment);
}

/* ---------- dropdown panel (opens UPWARD because we're at the bottom) ---------- */
.rubick-langpicker-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 0.45rem;
  background: rgba(18, 26, 19, 0.97);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--ner-line-strong);
  border-radius: var(--ner-radius-lg);
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--ner-signal-glow);

  /* Closed state: hidden, slightly downward (so it slides UP when opening). */
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom right;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.26s var(--ner-ease),
    transform 0.26s var(--ner-ease),
    visibility 0s linear 0.26s;
}
.rubick-langpicker.open .rubick-langpicker-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.26s var(--ner-ease),
    transform 0.26s var(--ner-ease),
    visibility 0s linear 0s;
}

/* ---------- dropdown options ---------- */
.rubick-langpicker-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--ner-radius-md);
  color: var(--ner-text);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.14s var(--ner-ease),
    color 0.14s var(--ner-ease);
}
.rubick-langpicker-option:hover {
  background: rgba(246, 241, 216, 0.06);
}
.rubick-langpicker-option.active {
  background: rgba(246, 241, 216, 0.1);
  color: var(--ner-parchment);
}
.rubick-langpicker-native {
  flex: 1;
  font-weight: 500;
}
.rubick-langpicker-code {
  font-family: var(--ner-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ner-text-muted);
}
.rubick-langpicker-option.active .rubick-langpicker-code {
  color: var(--ner-parchment);
}
.rubick-langpicker-check {
  width: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ner-parchment);
}

/* ---------- mobile: shrink trigger to just the globe ---------- */
@media (max-width: 540px) {
  .rubick-langpicker {
    bottom: 1rem;
    right: 1rem;
  }
  .rubick-langpicker-trigger-native {
    display: none;
  }
  .rubick-langpicker-trigger {
    padding: 0.55rem;
  }
}

/* ---------------- legal footer links ---------------- */
/* Shared across all pages. Sits inside .page-footer below the colophon. */

.legal-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ner-font-mono);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ner-text-dim);
}
.legal-links a {
  color: var(--ner-text-dim);
  text-decoration: none;
  transition: color 0.2s var(--ner-ease);
}
.legal-links a:hover {
  color: var(--ner-parchment);
}
.legal-links .sep {
  opacity: 0.4;
}

/* Reduced motion respect — accessibility first. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .ner-reveal > *,
  html.reveal-pending .ner-reveal > * {
    opacity: 1;
    transform: none;
  }
}