/**
 * site.css — Climactix Global · Cross-page consistency layer v3.0
 *
 * Institutional Arctic Blue design system.
 * Applied to EVERY page. Enforces:
 *   · Design tokens — single source of truth
 *   · Body / typography baseline (Inter + IBM Plex Mono only)
 *   · Scrollbar — thin graphite terminal style
 *   · No transform hovers, no backdrop-filter, no box-shadow on cards
 *   · Nav, button, card, table, input, badge normalisation
 *   · IBM Plex Mono on all numeric/data elements
 *   · Font-family kill rule: Barlow and Space Grotesk → Inter
 */

/* ═══════════════════════════════════════════════════════════════════
   0. GOOGLE FONTS — preload both faces for every page
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — canonical set, applied globally
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:          #000000;
  --bg-alt:      #0A0A0A;
  --surface:     #0F0F0F;
  --surface-2:   #1A1A1A;
  --surface-3:   #242424;
  --surface-4:   #2E2E2E;

  /* Borders */
  --border:         #2C2C2C;
  --border-strong:  #333333;
  --border-accent:  rgba(14,165,233,0.25);

  /* Primary accent — Institutional Arctic Blue */
  --accent:       #0EA5E9;
  --accent-dim:   #0284C7;
  --accent-glow:  rgba(14,165,233,0.10);
  --accent-fg:    #FFFFFF;

  /* Backward-compat aliases — all redirect to arctic blue */
  --amber:        #0EA5E9;
  --amber-dim:    #0284C7;
  --amber-glow:   rgba(14,165,233,0.10);
  --amber-fg:     #FFFFFF;
  --primary:      #0EA5E9;

  /* Data accents */
  --cyan:        #0EA5E9;   /* arctic blue — primary data highlight */
  --cyan-glow:   rgba(14,165,233,0.10);
  --green:       #00CC44;
  --green-glow:  rgba(0,204,68,0.10);
  --red:         #FF3333;
  --red-glow:    rgba(255,51,51,0.10);
  --blue:        #3399FF;
  --blue-bright: #3399FF;

  /* Text hierarchy */
  --text:        #FFFFFF;
  --text-2:      #888888;
  --text-muted:  #555555;
  --text-faint:  #222222;

  /* Status */
  --danger:   #FF3333;
  --warning:  #F59E0B;   /* true amber — warnings only */
  --success:  #00CC44;

  /* Rank colors (true metallic — not accent) */
  --gold:    #F5C518;
  --silver:  #888888;
  --bronze:  #B87333;

  /* Typography */
  --font: 'Inter', 'IBM Plex Sans', -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* Geometry */
  --r:   3px;   /* standard corner radius — never exceed on cards/panels */
  --r-sm:2px;
  --r-lg:4px;

  /* Motion */
  --t:         0.12s ease;
  --transition:0.12s ease;

  /* Layout */
  --nav-h:     44px;
  --util-h:    32px;
  --page-px:   40px;
}

/* Light theme overrides */
[data-theme="light"] {
  --bg:         #FFFFFF;
  --bg-alt:     #F7F7F7;
  --surface:    #FFFFFF;
  --surface-2:  #F4F4F4;
  --surface-3:  #EBEBEB;
  --surface-4:  #E0E0E0;
  --border:         rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.14);
  --text:        #0A0A0A;
  --text-2:      #3D3D3D;
  --text-muted:  #666666;
  --text-faint:  #999999;
}

/* ── LIGHT MODE HEADER — Always black (NASA-style) ── */
[data-theme="light"] .site-header {
  background: #0D0D0D !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
/* Header text white on black background */
[data-theme="light"] .header-wordmark {
  color: rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .header-wordmark span {
  color: rgba(255,255,255,0.5) !important;
}
[data-theme="light"] .nav-link {
  color: rgba(255,255,255,0.55) !important;
}
[data-theme="light"] .nav-link:hover {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .nav-link.active {
  color: var(--amber) !important;
}
/* Live status + sign-out in header */
[data-theme="light"] .live-status,
[data-theme="light"] .live-status span,
[data-theme="light"] .header-actions .nav-link {
  color: rgba(255,255,255,0.55) !important;
}
[data-theme="light"] .header-actions .nav-link:hover {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2. RESET & BODY BASELINE
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   3. SCROLLBAR — Bloomberg terminal thin graphite
═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: #2C2C2C; border-radius: 0; }
::-webkit-scrollbar-thumb:hover  { background: #3A3A3A; }
* { scrollbar-width: thin; scrollbar-color: #2C2C2C var(--bg); }

/* ═══════════════════════════════════════════════════════════════════
   4. TEXT SELECTION
═══════════════════════════════════════════════════════════════════ */
::selection      { background: rgba(14,165,233,0.25); color: var(--text); }
::-moz-selection { background: rgba(14,165,233,0.25); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   5. LINKS
═══════════════════════════════════════════════════════════════════ */
a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   6. HOVER — no lift / scale transforms (DESIGN.md non-negotiable)
═══════════════════════════════════════════════════════════════════ */
*:hover {
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. NAVIGATION — .cx-nav  (used by community, forum, leaderboard,
      funding-hub, solutions, battles, media pages)
═══════════════════════════════════════════════════════════════════ */
.cx-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  align-items: center;
  padding: 0 var(--page-px);
  gap: 0;
  /* No backdrop-filter — solid black per DESIGN.md */
  backdrop-filter: none !important;
}

.cx-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.cx-nav-logo img { height: 26px; width: auto; }
.cx-nav-logo-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}
.cx-nav-logo-sub {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  line-height: 1;
  margin-top: 2px;
}

.cx-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  height: 100%;
}

.cx-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 100%;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t) !important;
  white-space: nowrap;
  border-radius: 0 !important;
}
.cx-nav-link:hover {
  color: var(--text) !important;
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}
.cx-nav-link.active {
  color: var(--amber) !important;
  border-bottom-color: var(--amber) !important;
  background: transparent !important;
}
.cx-nav-link .nav-icon { font-size: 12px; line-height: 1; }

/* CTA button in nav */
.cx-nav-cta,
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: var(--amber);
  color: var(--amber-fg) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--t) !important;
  margin-left: 12px;
  flex-shrink: 0;
}
.cx-nav-cta:hover,
.nav-cta:hover {
  background: var(--amber-dim) !important;
  color: var(--amber-fg) !important;
}

/* ── .nav used by media.html ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  align-items: center;
  padding: 0 var(--page-px);
  gap: 20px;
  backdrop-filter: none !important;
}
.nav-brand {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  margin-left: auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  height: var(--nav-h);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav-links a:hover  { color: var(--text); border-bottom-color: rgba(255,255,255,0.15); }
.nav-links a.active { color: var(--amber); border-bottom-color: var(--amber); }

/* ── .site-header used by assessment.html + climactix-ai.html ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  align-items: center;
  padding: 0 var(--page-px);
  gap: 0;
  backdrop-filter: none !important;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.cx-logo-img {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .cx-logo-img,
:root:not([data-theme="light"]) .cx-logo-img {
  mix-blend-mode: screen;
}
.header-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.header-wordmark span {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 16px;
}
.nav-link {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--amber); }
.nav-link.nav-cta {
  background: var(--amber-glow);
  color: var(--amber);
  border: 1px solid var(--border-accent);
}
.nav-link.nav-cta:hover { background: var(--surface-2); }
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hdr-cta {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-fg) !important;
  background: var(--amber);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--t);
}
.hdr-cta:hover { background: var(--accent-dim); }

/* ═══════════════════════════════════════════════════════════════════
   8. TYPOGRAPHY — headings, data values, labels
═══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.04em; font-weight: 800; }
h2 { font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -0.025em; }
h3 { font-size: clamp(14px, 1.6vw, 18px); letter-spacing: -0.015em; }

/* Bloomberg-style ALL-CAPS eyebrow labels */
.cx-eyebrow,
.section-eyebrow,
.eyebrow {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--amber) !important;
}

/* Data / metric values always IBM Plex Mono */
.data-val,
.metric-val,
.kpi-val,
.stat-val,
.score-val,
[class*="-val"],
[class*="-num"],
[class*="-price"],
[class*="-score"] {
  font-family: var(--mono) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9. BUTTONS
═══════════════════════════════════════════════════════════════════ */
button, .btn {
  font-family: var(--mono);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t), border-color var(--t);
}

.btn-primary,
.cx-btn,
.cx-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--amber);
  color: var(--amber-fg) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--t) !important;
}
.btn-primary:hover,
.cx-btn:hover,
.cx-btn-primary:hover {
  background: var(--amber-dim) !important;
}

.btn-outline,
.cx-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 18px;
  background: none;
  color: var(--text-2) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none !important;
  transition: border-color var(--t), color var(--t) !important;
}
.btn-outline:hover,
.cx-btn-outline:hover {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   10. CARDS & PANELS — no box-shadow, no rounded corners > 3px
═══════════════════════════════════════════════════════════════════ */
.card,
.cx-card,
[class*="-card"],
[class*="-panel"]:not(.cx-intel-panel):not([id*="panel"]) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: none !important;
}

[class*="-card"]:hover,
.card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: none !important;
}

/* No excessive border-radius anywhere */
*:not(img):not(video):not(canvas):not(circle):not(svg):not(.cx-vs-showall-circle) {
  border-radius: min(var(--r, 3px), 6px) !important;
}
/* Allow pill/circle exceptions explicitly */
.pill, .badge-pill, .avatar, .cx-live-dot, .cxip-live-dot,
.glob-legend-dot, .gsb-dot, .cxla-pulse, .cx-util-dot { border-radius: 50% !important; }

/* ═══════════════════════════════════════════════════════════════════
   11. TABLES — Bloomberg data density
═══════════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; }

thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
tbody tr:hover { background: var(--surface-2); }
tbody td {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   12. INPUTS
═══════════════════════════════════════════════════════════════════ */
input, textarea, select {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--t);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--amber);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   13. STATUS BADGES / CHIPS
═══════════════════════════════════════════════════════════════════ */
.badge, .chip, .tag,
[class*="-badge"], [class*="-chip"], [class*="-tag"] {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════════
   14. PAGE SECTIONS — consistent background rhythm
═══════════════════════════════════════════════════════════════════ */
section { background: var(--bg); }
section:nth-child(even) { background: var(--bg-alt); }

/* ═══════════════════════════════════════════════════════════════════
   15. LIVE / ALERT INDICATORS
═══════════════════════════════════════════════════════════════════ */
.live-dot,
.cx-live-dot,
.globe-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50% !important;
  background: var(--green);
  display: inline-block;
  animation: site-live-pulse 2.4s ease-in-out infinite;
}
@keyframes site-live-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,204,68,0.40); }
  55%      { box-shadow: 0 0 0 4px rgba(0,204,68,0); }
}

/* ═══════════════════════════════════════════════════════════════════
   16. UTILITY BAR (pages that include it)
═══════════════════════════════════════════════════════════════════ */
.cx-util-bar {
  height: var(--util-h);
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   17. FOOTER
═══════════════════════════════════════════════════════════════════ */
footer,
.site-footer,
.cx-footer {
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   18. RESPONSIVE — mobile safety net
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --page-px: 16px; }
  .cx-nav-links, .nav-links { display: none; }
  h1 { font-size: clamp(22px, 6vw, 30px); }
}

/* ═══════════════════════════════════════════════════════════════════
   19. FONT NORMALISATION — kill rogue fonts system-wide
   Barlow, Barlow Condensed, Space Grotesk are not in the design system.
   Any element still referencing them falls back to Inter via this rule.
   Pages should also remove these from their Google Fonts @import.
═══════════════════════════════════════════════════════════════════ */
*[style*="Barlow"],
*[style*="Space Grotesk"] {
  font-family: var(--font) !important;
}

/* ── Nav active state: arctic blue underline ── */
.cx-nav-link.active,
.nav-links a.active,
.nav-link.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ── Suppress any leftover body gradients / particle canvases ── */
#space-canvas,
.space-bg,
.star-field,
.nebula,
.particle-canvas { display: none !important; }

/* ── Kill backdrop-filter on all nav variants ── */
.cx-nav,
.cx-nav *,
.nav,
.site-header,
.nav-dropdown-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}