/* ============================================================================
 * memory-graph.css — premium, ON-BRAND skin for the memory graph.
 * Warm-cream design system (tokens-v3): ink-on-paper neurons, soft warm
 * shadows (NOT neon glow), coral hubs, hairline synapses on a calm cream
 * canvas. Pairs with js/memory-graph.js (force-directed layout + canvas links).
 * Loaded AFTER memory.css so it refines the light base.
 * ========================================================================== */

:root {
  --mgx-paper: #f6f3ee;
  --mgx-paper-2: #fffdfa;
  --mgx-ink: #2b2621;
  --mgx-ink-soft: #6b655d;
  --mgx-coral: #e94b2c;
  --mgx-coral-deep: #bf3416;
  --mgx-line: rgba(43, 38, 33, 0.10);
}

/* ---- Calm cream stage with a soft vignette (depth without darkness) ---- */
.mg-body .mg-stage {
  background:
    radial-gradient(1200px 900px at 50% 42%, #fffdfa 0%, #f6f3ee 55%, #efe9e0 100%) !important;
  position: relative;
  overflow: hidden;
}
.mg-body .mg-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(43,38,33,0.05) 100%);
  pointer-events: none; z-index: 0;
}

/* Canvas (synapses) behind the nodes. */
#mgNeural { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mg-stage .mg-nodes { position: relative; z-index: 3; }
.mg-stage .mg-edges { display: none !important; }   /* canvas draws links now */

/* ============ NEURONS ============ */
/* Memory node = paper chip: soft warm shadow, hairline border, coral dot. */
.mg-body .mg-node--mem {
  background: var(--mgx-paper-2) !important;
  border: 1px solid rgba(43,38,33,0.10) !important;
  color: var(--mgx-ink) !important;
  border-radius: 999px !important;
  box-shadow:
    0 1px 2px rgba(43,38,33,0.06),
    0 6px 16px rgba(43,38,33,0.08),
    0 2px 4px rgba(191,52,22,0.04) !important;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s, border-color .24s;
}
.mg-body .mg-node--mem:hover,
.mg-body .mg-node--mem.is-hover {
  border-color: rgba(233,75,44,0.5) !important;
  box-shadow:
    0 2px 4px rgba(43,38,33,0.08),
    0 12px 28px rgba(43,38,33,0.14),
    0 4px 14px rgba(233,75,44,0.16) !important;
  transform: translate(-50%, -50%) scale(1.05);
}
.mg-body .mg-node--mem__dot {
  background: var(--mgx-coral) !important;
  box-shadow: 0 0 0 3px rgba(233,75,44,0.12) !important;
}

/* Category node = coral hub: the accent, larger, soft elevation. */
.mg-body .mg-node--cat {
  background: linear-gradient(150deg, #ff6a48 0%, var(--mgx-coral) 48%, var(--mgx-coral-deep) 100%) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  box-shadow:
    0 2px 4px rgba(43,38,33,0.10),
    0 14px 30px rgba(191,52,22,0.26),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
.mg-body .mg-node--cat:hover {
  box-shadow:
    0 4px 8px rgba(43,38,33,0.12),
    0 18px 40px rgba(191,52,22,0.36),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.mg-body .mg-node--cat__label { color: #fff !important; text-shadow: 0 1px 2px rgba(120,24,8,0.35); }
.mg-body .mg-node--cat__count {
  background: #fff !important; color: var(--mgx-coral-deep) !important;
  box-shadow: 0 2px 6px rgba(191,52,22,0.25) !important;
}

/* Root = the "self": warm cream core with a coral ring, the calm centre. */
.mg-body .mg-node--root {
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fff4ef 60%, #ffe7df 100%) !important;
  border: 1.5px solid rgba(233,75,44,0.55) !important;
  color: var(--mgx-coral-deep) !important;
  box-shadow:
    0 2px 6px rgba(43,38,33,0.10),
    0 16px 40px rgba(191,52,22,0.20),
    0 0 0 6px rgba(233,75,44,0.06),
    inset 0 2px 6px rgba(255,255,255,0.9) !important;
}

/* Add-memory node -> dashed coral, inviting. */
.mg-body .mg-node--add, .mg-body .mg-add-node {
  background: rgba(233,75,44,0.06) !important;
  border: 1px dashed rgba(233,75,44,0.45) !important;
  color: var(--mgx-coral-deep) !important;
  box-shadow: 0 6px 16px rgba(43,38,33,0.06) !important;
}
.mg-body .mg-node--add:hover, .mg-body .mg-add-node:hover { border-style: solid !important; background: rgba(233,75,44,0.10) !important; }

/* ---- Title + status: warm, restrained ---- */
.mg-body .bn-grad-text {
  background: linear-gradient(120deg, var(--mgx-coral) 0%, var(--mgx-coral-deep) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
.mg-center-title h2 { color: rgba(43,38,33,0.18); letter-spacing: -0.01em; }
.mg-center-title p { color: rgba(43,38,33,0.30); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; }
.mg-body #mgStatusPill {
  background: #fff !important; border: 1px solid rgba(43,38,33,0.10) !important;
  color: var(--mgx-ink) !important; box-shadow: 0 6px 18px rgba(43,38,33,0.08) !important;
}
.mg-body .bn-pill__dot { background: var(--mgx-coral) !important; }

/* Soft bottom fade so nodes settle into the page, not a hard edge. */
.mg-stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 22%;
  background: linear-gradient(180deg, transparent, #efe9e0 95%);
  pointer-events: none; z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .mg-node--mem, .mg-node--cat { transition: none !important; }
}