/* beddha — design tokens + global chrome (HANDOFF §2). Layout lives inline in main.jsx,
   mirroring the approved prototype; this file carries tokens, fonts, hover/focus states,
   scrollbars and keyframes (things inline styles can't express). */

:root {
  --ink: #231038;
  --ink-soft: #3f2f52;
  --muted: #7a6a8c;
  --muted-2: #8a7a9c;
  --faint: #a596b8;
  --brand-800: #2a0b45;
  --brand-900: #220838;
  --login-purple: #22093a;
  --canvas: #f6f3fb;
  --surface: #ffffff;
  --border: #efe7f6;
  --row-divider: #f6f1fb;
  --field-border: #e6ddf0;
  /* ACCENT — Cyan (ship cyan; §7 design-time accent) */
  --accent: #06CBD6;
  --accent-strong: #04E7F0;
  --accent-soft: rgba(6, 203, 214, 0.12);
  --accent-ink: #06323A;
  --accent-text: #0a7681;
  --amber: #f5a524;
  --amber-text: #9a6b12;
  --crisis: #c0356e;
  --crisis-bg: #fdeaf0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: #241033;
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #e2d6ef; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #d3c2e6; background-clip: content-box; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spin { to { transform: rotate(360deg); } }

button { font-family: 'Manrope', sans-serif; }

/* ---- sidebar nav ---- */
.nav-item { transition: background 0.12s ease, color 0.12s ease; }
.nav-item:hover:not(.on) { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.nav-item.dim:hover:not(.on) { color: #cbb9e2; }

/* ---- buttons ---- */
.btn-ghost { transition: border-color 0.12s ease, color 0.12s ease; }
.btn-ghost:hover { border-color: var(--accent) !important; color: var(--ink) !important; }
.btn-ghost-accent:hover { border-color: var(--accent) !important; }
.btn-primary { transition: transform 0.15s ease, box-shadow 0.2s ease; }
.btn-primary:hover { box-shadow: 0 12px 30px -8px rgba(42, 11, 69, 0.6), 0 0 0 1px var(--accent); transform: translateY(-1px); }

/* ---- inputs — cyan focus rings ---- */
.fld { outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.fld:focus { border-color: var(--accent) !important; background: #ffffff !important; box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---- rows / list hovers ---- */
.thread:hover { background: #faf7fd; }
.linkish { cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* ---- provenance chips (real-wired vs sample honesty) ---- */
.prov {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px;
  background: #f1ecf7; color: #8a7a9c; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; flex: 0 0 auto; white-space: nowrap;
}
.prov.live { background: var(--accent-soft); color: var(--accent-text); }

/* ---- chart series toggle ---- */
.series-btn { transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--brand-800); color: #fff; border-radius: 12px; padding: 12px 18px;
  font-size: 13px; font-weight: 600; box-shadow: 0 20px 50px -16px rgba(10, 2, 20, 0.55); z-index: 100;
}