/* ===========================================================================
   Sputnik X — Memory Center :: connectome host base chrome (NON-Tailwind)

   Plain static CSS — deliberately NOT run through Tailwind/Lightning CSS so the
   literal `--L?` custom-property ident (referenced by connectome.js via
   var(--L?)) is preserved verbatim. Linked AFTER memory-center-out.css and
   connectome.css.

   Two jobs:
   1. Re-declare the connectome :root colour vars (originally inline in
      connectome.html, which we do NOT include) so colorForNode()/colorForEdge()
      resolve their var(--L4) / var(--L?) / var(--burn) etc.
   2. Port the base chrome rules (#canvas, #tooltip, #status, #search-wrap,
      #focus-banner, #slider-wrap, halos) from connectome.html's inline <style>,
      re-scoped from the viewport (100vw/100vh, fixed) to the #mc-neural-graph
      container so they sit correctly inside the shell (sidebar + header offset).
   =========================================================================== */

.mc-shell {
  --bg: #0a0e1a;
  --bg-panel: rgba(9, 15, 20, 0.72);
  --fg: #dde3ea;
  --muted: #bbc9cd;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #22d3ee;
  --burn: #ff5e5e;
  --static: #4c8bff;
  --mem: rgba(160, 170, 190, 0.55);
  --L4: #ff5e5e;
  --L23: #4c8bff;
  --L5: #4ad07b;
  --L6: #b48bff;
  --L?: #8a96aa;
  --memnode: #6b7488;
  --filenode: #3aa0ff;
  --fileedge: rgba(58, 160, 255, 0.55);
}

/* "← Platform" sidebar back-link (FIX 2). Subtle-but-obvious cyan-on-dark,
   sits above the Sovereign OS badge. Plain CSS here (NOT Tailwind) so it needs
   no `npm run mc:build`. Matches the connectome accent (#22d3ee) + the shell
   primary token (#8aebff). */
.mc-back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 14px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8aebff; /* --color-mc-primary */
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 8px;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.mc-back-link:hover,
.mc-back-link:focus-visible {
  color: #d4f7ff;
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
  outline: none;
}
.mc-back-link .mc-back-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.mc-back-link:hover .mc-back-arrow,
.mc-back-link:focus-visible .mc-back-arrow {
  transform: translateX(-2px);
}

/* The live D3 SVG fills its container (NOT the viewport). */
#mc-neural-graph #canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#mc-neural-graph #tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg);
  max-width: 260px;
  opacity: 0;
  transition: opacity 80ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
#mc-neural-graph #tooltip strong {
  color: var(--accent);
}
#mc-neural-graph #tooltip .row {
  color: var(--muted);
}

#mc-neural-graph #search-wrap {
  position: absolute;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 8px 12px;
}
#mc-neural-graph #search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  width: 180px;
}
#mc-neural-graph #search-input::placeholder {
  color: var(--muted);
}
#mc-neural-graph #search-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  font-family: inherit;
}
#mc-neural-graph #search-clear:hover {
  color: var(--fg);
  border-color: var(--accent);
}
#mc-neural-graph #search-hits {
  color: var(--muted);
  font-size: 11px;
  min-width: 56px;
}

#mc-neural-graph #focus-banner {
  position: absolute;
  z-index: 25;
  border: 1px solid var(--accent);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--fg);
  display: none;
  align-items: center;
  gap: 10px;
}
#mc-neural-graph #focus-banner strong {
  color: var(--accent);
}
#mc-neural-graph #focus-banner button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 11px;
  font-family: inherit;
}
#mc-neural-graph #focus-banner button:hover {
  color: var(--fg);
  border-color: var(--accent);
}

#mc-neural-graph #slider-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
#mc-neural-graph #slider-wrap input[type='range'] {
  width: 280px;
}
#mc-neural-graph #slider-wrap output {
  color: var(--fg);
  min-width: 70px;
  text-align: right;
}

#mc-neural-graph #status {
  position: absolute;
  color: var(--muted);
  font-size: 11px;
  background: var(--bg-panel);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  z-index: 20;
}

/* Halo rings (orphan/stale) + search-match flash — D3 appends these classes. */
#mc-neural-graph .halo-orphan {
  stroke: #ff5e5e;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 2, 2;
  opacity: 0.85;
}
#mc-neural-graph .halo-stale {
  stroke: #ffa93a;
  stroke-width: 1.5;
  fill: none;
  opacity: 0.7;
}
#mc-neural-graph .search-match {
  stroke: #fff45e !important;
  stroke-width: 3 !important;
}

/* ── Position context fix ──────────────────────────────────────────────
   connectome.css / connectome.html declare the floating chrome as
   position: fixed (viewport-relative), which would overlap the 256px sidebar.
   Re-anchor every floating panel to the #mc-neural-graph container (which
   already begins after the sidebar + header) by switching to position:absolute
   and clamping it inside the container. This is the council mount-checklist
   "canvas ≠ viewport / sidebar offset" fix, applied to the chrome too. */
#mc-neural-graph .connectome-controls {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 25;
}
#mc-neural-graph .thread-inspector {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
/* The connectome's own #search-wrap is hidden — the Memory Center header search
   box drives #search-input via mc-shell.js (avoids duplicate UI + overlap with
   the top-right stats panel). The element stays in the DOM so connectome.js's
   parse-time getElementById('search-input') still resolves. */
#mc-neural-graph #search-wrap {
  display: none !important;
}
/* Focus banner — top-centre of the canvas, clear of both the control panel
   (left) and the live-stats panel (right). */
#mc-neural-graph #focus-banner {
  top: 24px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-radius: 10px;
}
#mc-neural-graph #status {
  left: 24px;
  bottom: 24px;
  border-radius: 8px;
}
#mc-neural-graph #slider-wrap {
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}