/* ==========================================================================
   SIMON UI — Mindpod design system (dark-default, tokenized for light GA)
   Council synthesis: Codex system + GPT-5.6 critique. Accent budget: one
   persistent accent per viewport; glow only for active execution or focus.
   ========================================================================== */

:root {
  /* Palette — mindpodtech.com */
  --bg:            #0A1628;
  --bg-alt:        #0C1B30;
  --card:          #102339;
  --border:        #1E3A5C;
  --text:          #EAF1FA;
  --muted:         #9DB2C9;
  --accent:        #36D1E0;
  --accent-2:      #1E6BFF;
  --accent-soft:   rgba(54,209,224,.12);
  --accent-border: rgba(54,209,224,.40);
  --danger:        #E5484D;
  --danger-soft:   rgba(229,72,77,.12);
  --success:       #3FE0A0;
  --success-soft:  rgba(63,224,160,.12);
  --warn:          #F5A524;
  --warn-soft:     rgba(245,165,36,.12);
  --grad:          linear-gradient(110deg,#36D1E0,#1E6BFF);
  --ink-grad:      linear-gradient(100deg,#fff 0%,#CFEFF6 38%,#36D1E0 66%,#1E6BFF 100%);

  /* Type */
  --font-display: 'Rajdhani','Segoe UI',system-ui,sans-serif;
  --font-body:    'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:    'SF Mono',ui-monospace,Menlo,monospace;

  /* Radius */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* Elevation (borders/contrast first; glow reserved) */
  --elev-focus: 0 0 0 1px rgba(54,209,224,.30), 0 8px 30px rgba(54,209,224,.22);
  --shadow:     0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.45);

  /* Motion */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-micro: 120ms; --t-menu: 160ms; --t-drawer: 220ms; --t-stream: 240ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.55 var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(54,209,224,.25); }

/* Focus visibility — WCAG: a persistent, obvious ring */
:focus-visible {
  outline: 2px solid rgba(54,209,224,.65);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- type scale ---------- */
.s-display { font: 600 40px/48px var(--font-display); letter-spacing: .01em; }
.s-pagetitle { font: 600 22px/28px var(--font-body); letter-spacing: -.01em; }
.s-section  { font: 600 15px/20px var(--font-body); }
.s-metric   { font: 600 32px/36px var(--font-display); }
.s-caption  { font: 500 12px/16px var(--font-body); color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font: 600 13px/1 var(--font-body); cursor: pointer;
  transition: all var(--t-micro) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: var(--accent-2); color: #fff;   /* solid for AA contrast */
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(30,107,255,.28);
}
.btn-secondary {
  background: var(--card); border-color: var(--border); color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  border-color: rgba(54,209,224,.45);
  background: rgba(54,209,224,.08);
}
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: rgba(234,241,250,.06); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
}
.card-hover { transition: border-color var(--t-micro) var(--ease-out),
                         transform var(--t-micro) var(--ease-out); }
.card-hover:hover { border-color: rgba(54,209,224,.38); transform: translateY(-1px); }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; height: 22px;
  padding: 0 8px; border-radius: var(--r-pill);
  font: 500 12px/16px var(--font-body);
}
.badge-info    { background: var(--accent-soft);  color: var(--accent); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn    { background: var(--warn-soft);    color: var(--warn); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-neutral { background: rgba(157,178,201,.10); color: var(--muted); }

/* ---------- inputs ---------- */
.input {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font: 400 13px/1 var(--font-body); outline: none;
  transition: border-color var(--t-micro) var(--ease-out),
              box-shadow var(--t-micro) var(--ease-out);
}
.input::placeholder { color: var(--muted); }
.input:focus { border-color: rgba(54,209,224,.65);
               box-shadow: 0 0 0 3px rgba(54,209,224,.10); }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; }

/* ---------- Proofline (signature) --------------------------------------
   A segmented provenance edge for agent-produced work: sources, actions,
   policy, result. Segments reflect REAL state only — no invented steps. */
.proofline {
  position: relative; padding-left: 14px;
}
.proofline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px;
  background: var(--border);
}
.proofline.pl-active::before  { background: var(--grad); }
.proofline.pl-done::before    { background: var(--accent); }
.proofline.pl-verified::before{ background: var(--success); }
.proofline.pl-waiting::before { background: var(--warn); }
.proofline.pl-failed::before  { background: var(--danger); }
.proofline .pl-label {
  font: 500 11px/16px var(--font-body); color: var(--muted);
  letter-spacing: .02em;
}

/* ---------- skeletons (neutral, never cyan shimmer) ---------- */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(100deg,
    rgba(234,241,250,.05) 40%, rgba(234,241,250,.10) 50%,
    rgba(234,241,250,.05) 60%);
  background-size: 200% 100%;
  animation: sk 1.6s linear infinite;
}
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- toasts ---------- */
.toast-wrap {
  position: fixed; top: 16px; right: 16px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  width: 360px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  font: 400 13px/1.45 var(--font-body);
  animation: toast-in var(--t-drawer) var(--ease-out);
}
.toast.t-success { border-left: 3px solid var(--success); }
.toast.t-error   { border-left: 3px solid var(--danger); }
.toast.t-info    { border-left: 3px solid var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

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