/* ============================================================
   GAIBE Learning — Interactive Demo shell
   Shared design tokens + primitives, lifted from the live site
   "graph paper, brought to life" · warm paper · ink-navy · blue→violet
   ============================================================ */

:root {
  --paper: #FBFAF5;
  --paper-deep: #F4F2EA;
  --card: #FFFFFF;
  --ink: #1B2240;
  --ink-soft: #4E5573;
  --ink-faint: rgba(27, 34, 64, 0.55);
  --line: rgba(27, 34, 64, 0.12);
  --line-strong: rgba(27, 34, 64, 0.22);
  --grid-line: rgba(45, 91, 255, 0.07);
  --blue: #2D5BFF;
  --violet: #7B5CFF;
  --violet-ink: #6A45E0;   /* AA-safe violet for small label text on paper */
  --amber: #F59E2D;
  --amber-ink: #B26A00;    /* AA-safe amber for text/icons on paper */
  --green: #1A7A50;
  --green-soft: rgba(34, 160, 107, 0.14);
  --amber-soft: rgba(245, 158, 45, 0.16);
  --violet-soft: rgba(123, 92, 255, 0.13);
  --blue-soft: rgba(45, 91, 255, 0.10);
  --red: #E5484D;
  --grad: linear-gradient(94deg, var(--blue), var(--violet));
  --grad-soft: linear-gradient(94deg, rgba(45,91,255,.14), rgba(123,92,255,.14));
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 2px 6px rgba(27, 34, 64, 0.05), 0 18px 44px -18px rgba(27, 34, 64, 0.18);
  --shadow-lift: 0 4px 10px rgba(27, 34, 64, 0.06), 0 30px 60px -24px rgba(45, 91, 255, 0.28);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* paper grain over everything (matches marketing site) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* graph-paper backdrop utility */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 20%, transparent 80%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a { color: inherit; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 500;
}

em.grad-ink {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.72em 1.4em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(45, 91, 255, 0.55);
}
.btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(45, 91, 255, 0.6); }
.btn-primary:not(:disabled):active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn-ghost:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:not(:disabled):hover { background: var(--blue); transform: translateY(-1px); }
.btn-sm { padding: 0.55em 1.05em; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* ---------- brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  box-shadow: 0 6px 14px -6px rgba(45, 91, 255, 0.6);
  flex-shrink: 0;
}
.brand-word {
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.98rem;
}
.brand-word em {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  margin-left: 4px;
  color: var(--ink-soft);
}

/* ---------- demo top bar ---------- */
.demobar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: rgba(251, 250, 245, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.demobar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.demobar-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.demobar-meta .title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.15; }
.demobar-meta .sub { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demobar-right { display: flex; align-items: center; gap: 10px; }
.demo-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--card);
}

/* ---------- live pill / dot ---------- */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid rgba(229, 72, 77, 0.25);
  border-radius: 999px;
  padding: 5px 11px 5px 9px;
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.5);
  animation: live-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* ---------- generic card / panel ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ---------- status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-good { color: var(--green); background: var(--green-soft); border-color: rgba(34,160,107,.28); }
.pill-mid  { color: var(--blue); background: var(--blue-soft); border-color: rgba(45,91,255,.28); }
.pill-warn { color: #B26A00; background: var(--amber-soft); border-color: rgba(245,158,45,.4); }
.pill-bad  { color: var(--red); background: rgba(229,72,77,.10); border-color: rgba(229,72,77,.32); }

/* ---------- scrollbars ---------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* visually-hidden */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}