/* =========================================================
   AscendEd IQ — Tweaks override layer
   Bound to CSS vars written by demo-tweaks.jsx
   (mood / vibe / signal presets)
   ========================================================= */

:root {
  /* Fallbacks so the page works without the tweaks layer */
  --aei-bg: var(--slate-50);
  --aei-panel: rgba(255,255,255,0.72);
  --aei-panel-border: rgba(255,255,255,0.6);
  --aei-ink:   var(--slate-900);
  --aei-ink-2: var(--slate-600);
  --aei-ink-3: var(--slate-500);
  --aei-ink-4: var(--slate-400);
  --aei-grid-line: rgba(15,42,68,0.035);
  --aei-hairline:  rgba(15,42,68,0.08);
  --aei-orb-opacity: 0.55;
  --aei-mesh-mask-in: 20%;
  --aei-mesh-mask-out: 80%;

  --aei-radius-xs: 10px;
  --aei-radius-sm: 14px;
  --aei-radius-md: 18px;
  --aei-radius-lg: 24px;
  --aei-saturate: 100%;
  --aei-blur: 20px;
  --aei-orb-blur: 80px;
  --aei-drift-dur: 26s;
  --aei-hover-lift: translateY(-1px);
  --aei-dur: 220ms;

  --aei-kpi-weight: 700;
  --aei-kpi-size: 26px;
  --aei-chart-line: 2.5;
  --aei-chart-point: 4;
  --aei-bar-alpha: 1;
  --aei-badge-alpha: 1;
  --aei-pin-glow: 0 0 0 3px rgba(0,102,204,0.55), 0 0 14px rgba(0,102,204,0.35);
}

/* ---- PAGE BG + MESH ---- */
body.demo-page { background: var(--aei-bg); transition: background var(--aei-dur) ease; }
.gradient-mesh { background: var(--aei-bg); }
.mesh-orb { opacity: var(--aei-orb-opacity) !important; filter: blur(var(--aei-orb-blur)) !important; }
.mesh-orb--a, .mesh-orb--b, .mesh-orb--c, .mesh-orb--d { animation-duration: var(--aei-drift-dur) !important; }
.mesh-grid {
  background-image:
    linear-gradient(to right, var(--aei-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--aei-grid-line) 1px, transparent 1px) !important;
  mask-image: radial-gradient(ellipse at center, black var(--aei-mesh-mask-in), transparent var(--aei-mesh-mask-out)) !important;
}

/* ---- GLASS PANEL (rail + main shell only) ---- */
.aei-rail,
.aei-main {
  background: var(--aei-panel) !important;
  border-color: var(--aei-panel-border) !important;
  backdrop-filter: blur(var(--aei-blur)) saturate(var(--aei-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--aei-blur)) saturate(var(--aei-saturate)) !important;
  transition: background var(--aei-dur) ease, border-color var(--aei-dur) ease,
              border-radius var(--aei-dur) ease;
}

/* ---- CORNER RADII (vibe) ---- */
.aei-rail { border-radius: var(--aei-radius-md) !important; }
.aei-main { border-radius: var(--aei-radius-lg) !important; }
.aei-kpi-icon { border-radius: calc(var(--aei-radius-xs) - 1px) !important; }
.aei-lens-btn { border-radius: var(--aei-radius-xs) !important; }
.aei-btn,
.aei-btn-primary,
.aei-btn-ghost { border-radius: var(--aei-radius-sm) !important; }
.aei-iconbtn { border-radius: var(--aei-radius-xs) !important; }
.aei-ai { border-radius: var(--aei-radius-sm) !important; }
.aei-step { border-radius: var(--aei-radius-sm) !important; }
.aei-qdot { border-radius: calc(var(--aei-radius-xs) * 0.5) !important; }
.aei-compass { border-radius: var(--aei-radius-sm) !important; }
.aei-chips button { border-radius: calc(var(--aei-radius-xs) * 0.6) !important; }
.aei-rail-pinned { border-radius: var(--aei-radius-sm) !important; }

/* ---- TYPE INK (mood) ---- */
.aei-crumbs b,
.aei-card-head h3,
.aei-student-hero .info h2,
.aei-rail-brand-text b,
.aei-rail-pinned .info b,
.aei-kpi-value,
.aei-barlist .row .pct,
.aei-step b,
.aei-roster-row .name { color: var(--aei-ink) !important; }

.aei-crumbs,
.aei-rail-pinned .info span,
.aei-rail-brand-text span,
.aei-kpi-top .label,
.aei-kpi-foot,
.aei-card-head .sub,
.aei-student-hero .info .meta,
.aei-table th,
.aei-impact-xaxis,
.aei-impact-yaxis,
.aei-dist-labels > div,
.aei-compass .axis-label,
.aei-chips button { color: var(--aei-ink-3) !important; }

.aei-ai-body,
.aei-step p,
.aei-table td,
.aei-roster-row .score,
.aei-rail-tip { color: var(--aei-ink-2) !important; }

.aei-rail-section-label,
.aei-crumbs svg { color: var(--aei-ink-4) !important; }

/* ---- KPI weight + size (signal) ---- */
.aei-kpi-value {
  font-size: var(--aei-kpi-size) !important;
  font-weight: var(--aei-kpi-weight) !important;
  transition: font-size var(--aei-dur) ease;
}

/* ---- Pinned glow (signal) ---- */
.aei-dist-dot.is-pinned,
.aei-impact-dot.is-pinned,
.aei-compass .school.is-pinned .dot { box-shadow: var(--aei-pin-glow) !important; }
.aei-roster-row.is-pinned,
.aei-table tr.is-pinned td:first-child { box-shadow: inset 3px 0 0 var(--blue-primary), var(--aei-pin-glow) !important; }

/* ---- Hover lift ---- */
.aei-btn-primary:hover { transform: var(--aei-hover-lift) !important; }

/* ─── MOOD: NIGHT — extra polish ─── */
body[data-aei-mood="night"] .aei-dist { border-bottom-color: rgba(148,180,220,0.15) !important; }
body[data-aei-mood="night"] .aei-compass { border-color: rgba(148,180,220,0.18) !important; }
body[data-aei-mood="night"] .aei-compass .cross-h,
body[data-aei-mood="night"] .aei-compass .cross-v { border-color: rgba(148,180,220,0.2) !important; }
body[data-aei-mood="night"] .aei-compass .school .label { background: rgba(20,34,56,0.85) !important; color: #F1F5F9 !important; }
body[data-aei-mood="night"] .aei-table th { border-bottom-color: rgba(148,180,220,0.15) !important; }
body[data-aei-mood="night"] .aei-table td { border-bottom-color: rgba(148,180,220,0.08) !important; }
body[data-aei-mood="night"] .aei-table tr:hover td { background: rgba(0,128,255,0.10) !important; }
body[data-aei-mood="night"] .aei-table tr.is-pinned td { background: rgba(0,128,255,0.14) !important; }
body[data-aei-mood="night"] .aei-barlist .row .track { background: rgba(148,180,220,0.1) !important; }
body[data-aei-mood="night"] .aei-rail-tip { background: rgba(148,180,220,0.06) !important; }
body[data-aei-mood="night"] .aei-rail-pm { background: rgba(148,180,220,0.08) !important; }
body[data-aei-mood="night"] .aei-rail-pm button.is-active { background: rgba(0,128,255,0.25) !important; color: #7BB8FF !important; }
body[data-aei-mood="night"] .aei-subject-switch { background: rgba(148,180,220,0.08) !important; }
body[data-aei-mood="night"] .aei-subject-switch button.is-active { background: rgba(0,128,255,0.25) !important; color: #7BB8FF !important; }
body[data-aei-mood="night"] .aei-chip { background: rgba(0,128,255,0.18) !important; color: #7BB8FF !important; }
body[data-aei-mood="night"] .aei-chip.is-demo { background: rgba(147,112,219,0.20) !important; color: #B89EE8 !important; }
body[data-aei-mood="night"] .aei-iconbtn { background: rgba(148,180,220,0.08) !important; color: var(--aei-ink-3) !important; }
body[data-aei-mood="night"] .aei-step { background: rgba(148,180,220,0.06) !important; border-color: rgba(148,180,220,0.12) !important; }
body[data-aei-mood="night"] .aei-ai { background: linear-gradient(135deg, rgba(147,112,219,0.15), rgba(0,128,255,0.10)) !important; border-color: rgba(147,112,219,0.35) !important; }
body[data-aei-mood="night"] .aei-ai-head button { background: rgba(147,112,219,0.25) !important; color: #DCC8FF !important; border-color: rgba(147,112,219,0.4) !important; }
body[data-aei-mood="night"] .aei-chips button { background: rgba(148,180,220,0.08) !important; }
body[data-aei-mood="night"] .aei-lens-btn:hover { background: rgba(0,128,255,0.10) !important; }
body[data-aei-mood="night"] .aei-lens-btn.is-active { background: linear-gradient(135deg, rgba(0,128,255,0.18), rgba(147,112,219,0.14)) !important; border-color: rgba(0,128,255,0.30) !important; }
body[data-aei-mood="night"] .aei-roster-row:hover { background: rgba(0,128,255,0.08) !important; }
body[data-aei-mood="night"] .aei-roster-row.is-pinned { background: rgba(0,128,255,0.15) !important; }
body[data-aei-mood="night"] .aei-impact-grid { background-image: linear-gradient(to bottom, rgba(148,180,220,0.08) 1px, transparent 1px) !important; }
body[data-aei-mood="night"] .aei-impact { border-bottom-color: rgba(148,180,220,0.12) !important; }
body[data-aei-mood="night"] .aei-top-hat nav a { color: var(--aei-ink-2) !important; }
body[data-aei-mood="night"] .aei-top-hat nav a:hover,
body[data-aei-mood="night"] .aei-top-hat nav a.active { background: rgba(0,128,255,0.15) !important; color: #7BB8FF !important; }
body[data-aei-mood="night"] .aei-badge { background: rgba(148,180,220,0.10) !important; }
body[data-aei-mood="night"] .aei-rail-brand { border-bottom-color: rgba(148,180,220,0.12) !important; }
body[data-aei-mood="night"] .aei-rail-pinned { background: linear-gradient(135deg, rgba(0,128,255,0.12), rgba(0,184,169,0.10)) !important; border-color: rgba(0,128,255,0.22) !important; }

/* ─── MOOD: STUDIO — warm paper ─── */
body[data-aei-mood="studio"] .aei-rail-pm,
body[data-aei-mood="studio"] .aei-subject-switch { background: rgba(26,24,20,0.06) !important; }
body[data-aei-mood="studio"] .aei-iconbtn { background: rgba(26,24,20,0.05) !important; }
body[data-aei-mood="studio"] .aei-chips button { background: rgba(26,24,20,0.05) !important; }
body[data-aei-mood="studio"] .aei-step { background: rgba(255,253,248,0.7) !important; border-color: rgba(26,24,20,0.08) !important; }
body[data-aei-mood="studio"] .aei-rail-tip { background: rgba(26,24,20,0.04) !important; }
body[data-aei-mood="studio"] .aei-barlist .row .track { background: rgba(26,24,20,0.07) !important; }

/* ─── VIBE: CRISP — kill blur/saturate/motion tweaks ─── */
body[data-aei-vibe="crisp"] .mesh-orb { animation: none !important; }
body[data-aei-vibe="crisp"] .aei-ai-body .skeleton { animation-duration: 2s !important; }

/* ─── VIBE: EXUBERANT — slightly amplified hover ─── */
body[data-aei-vibe="exuberant"] .aei-kpi:hover,
body[data-aei-vibe="exuberant"] .aei-card:hover { transform: var(--aei-hover-lift); }
.aei-kpi, .aei-card { transition: transform var(--aei-dur) ease, background var(--aei-dur) ease, border-radius var(--aei-dur) ease; }

/* ─── Chart container re-render friendliness ─── */
.aei-chart canvas { transition: opacity var(--aei-dur) ease; }