/* ============================================================================
   Multiplier AI — "Atlas" theme
   Dark Atlas navy + Signal blue, glass surfaces, NO solid color fills.
   Loaded AFTER each page's inline <style> so these token-driven rules win.
   The GRAPH (nodes/edges) is styled in app.js and is intentionally untouched.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,600&display=swap');

:root {
  /* base ink — the page is a gradient, never a solid block */
  --atlas:        #13152B;
  --atlas-2:      #1B1E3A;
  --ink-deep:     #0C0E1C;
  --page:         radial-gradient(125% 120% at 50% -10%, #20244A 0%, #14162E 48%, #0B0D1A 100%);

  /* signal accent — only ever a gradient / glow / soft tint */
  --signal:        #0623C9;
  --signal-bright: #2E47E0;
  --signal-grad:   linear-gradient(135deg, #2E47E0 0%, #0623C9 100%);
  --signal-soft:   rgba(46, 71, 224, 0.12);
  --signal-line:   rgba(46, 71, 224, 0.45);
  --signal-glow:   0 0 22px rgba(46, 71, 224, 0.40);

  /* glass surfaces — translucent, blurred, hairline-bordered */
  --glass:    linear-gradient(180deg, rgba(31, 35, 66, 0.72), rgba(17, 19, 38, 0.60));
  --glass-2:  linear-gradient(180deg, rgba(31, 35, 66, 0.55), rgba(17, 19, 38, 0.42));
  --hair:     rgba(255, 255, 255, 0.08);
  --hair-2:   rgba(255, 255, 255, 0.16);
  --shadow:   0 10px 34px rgba(0, 0, 0, 0.45);

  /* text on dark */
  --fg:    #FFFFFF;
  --fg-2:  rgba(255, 255, 255, 0.56);
  --fg-3:  rgba(255, 255, 255, 0.34);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ── base ─────────────────────────────────────────────────────────────── */
body {
  background: var(--page) fixed;
  color: var(--fg);
  font-family: var(--font-mono);
}

/* default (primary) button → signal gradient, soft glow. No solid fill. */
button {
  background: var(--signal-grad);
  color: #FFFFFF;
  border: 1px solid var(--signal-line);
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.4px;
  box-shadow: var(--signal-glow);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
button:focus { outline: none; box-shadow: var(--signal-glow), 0 0 0 2px var(--signal-line); }
button:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }

/* ghost / toggle buttons → transparent, hairline, signal-soft when active */
button.secondary {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 400;
}
button.secondary:hover { color: var(--fg); border-color: var(--hair-2); background: rgba(255,255,255,0.03); }
button.secondary.active {
  color: #FFFFFF;
  border-color: var(--signal-line);
  background: var(--signal-soft);
  box-shadow: inset 0 0 0 1px var(--signal-line), 0 0 14px rgba(46,71,224,0.25);
}

/* inputs → glass field, hairline, gradient focus ring */
input {
  background: var(--glass-2);
  color: var(--fg);
  border: 1px solid var(--hair);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
input::placeholder { color: var(--fg-3); }
input:focus { outline: none; border-color: var(--signal-line); box-shadow: 0 0 0 2px var(--signal-soft); }

/* icon button */
button.mag {
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--fg-2);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
button.mag:hover { color: var(--fg); border-color: var(--signal-line); background: var(--glass); filter: none; }

.scrollbar::-webkit-scrollbar-thumb { background: var(--hair-2); }

/* ── utility classes for the chrome ───────────────────────────────────── */

/* glass panel — the card vocabulary */
.atlas-panel {
  background: var(--glass) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(16px) !important;
}

/* uppercase tracked mono micro-label / eyebrow */
.atlas-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--fg-3);
  font-size: 10px;
}

/* editorial serif display heading + big metric */
.atlas-display { font-family: var(--font-display) !important; font-weight: 500; letter-spacing: 0.2px; }
.atlas-metric  { font-family: var(--font-display) !important; font-weight: 600; font-variant-numeric: tabular-nums; }

/* gradient progress bar: <div class="atlas-bar"><i style="width:NN%"></i></div> */
.atlas-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.atlas-bar > i { display: block; height: 100%; background: var(--signal-grad); box-shadow: var(--signal-glow); }

/* hairline divider + status dot */
.atlas-hair { height: 1px; background: var(--hair); border: none; }
.atlas-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-bright); box-shadow: 0 0 10px var(--signal-bright);
  display: inline-block; vertical-align: middle;
}

/* ── markdown accents retinted to Signal (chat replies) ───────────────── */
.md a, .md th, .md code { color: #9FB0FF; }
.md code { background: var(--signal-soft); }
.md th { background: var(--signal-soft); }
.md blockquote { border-left-color: var(--signal-line); }
.md strong, .md h1, .md h2, .md h3, .md h4 { color: var(--fg); }