/* ─────────────────────────────────────────────────────────────────────
   ChronoForge Pulse — Supply Chain Demand: Mission-Control Flowchart
   Drop-in module. Mount target: <div id="sc-flowchart-root"></div>
   Aesthetic: industrial / mission-control. Dark slate, cyan signal,
   sharp gradient edges. No round shadows, no SaaS purple.
   ───────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

#sc-flowchart-root {
  /* Editorial-palette remap — preserves "mission control" structure
     but swaps the legacy dark-blue/cyan scheme for forest/warm-paper.
     Token names kept (--mc-cyan, --mc-amber, etc.) so the JS that
     references them keeps working. */
  --mc-bg:        var(--bg, #f6f5f1);
  --mc-surface:   var(--bg-card, #ffffff);
  --mc-elev:      var(--bg-soft, #efece4);
  --mc-border:    var(--line, #e3e0d6);
  --mc-border-hi: var(--line-2, #cfcbbf);
  --mc-cyan:      var(--accent, #2d4a3e);
  --mc-cyan-dim:  #6c8b7a;
  --mc-green:     var(--accent, #2d4a3e);
  --mc-amber:     var(--warn, #b8633a);
  --mc-danger:    var(--warn, #b8633a);
  --mc-text:      var(--ink, #0e0d0a);
  --mc-muted:     var(--muted, #6a6760);
  --mc-deep:      var(--ink-2, #3f3d36);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Manrope", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  font-family: var(--body);
  color: var(--mc-text);
  background: var(--mc-bg);
  padding: 24px 28px;
  border: 1px solid var(--mc-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Faint corner registration marks — mission-control detail */
#sc-flowchart-root::before,
#sc-flowchart-root::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--mc-cyan-dim);
  opacity: 0.45;
  pointer-events: none;
}
#sc-flowchart-root::before { top: 8px;    left: 8px;    border-right: none; border-bottom: none; }
#sc-flowchart-root::after  { bottom: 8px; right: 8px;   border-left: none;  border-top: none;    }

/* ── Header bar ─────────────────────────────────────────────────────── */
.mc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--mc-border);
}
.mc-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
}
.mc-title .mc-bracket { color: var(--mc-cyan); font-weight: 400; }
.mc-subtitle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mc-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mc-status-bar {
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mc-muted);
}
.mc-status-bar .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mc-green);
  margin-right: 6px;
  box-shadow: 0 0 8px currentColor;
  animation: mc-pulse 2.4s ease-in-out infinite;
}
.mc-status-bar .dot.idle    { background: var(--mc-deep);   animation: none; box-shadow: none; }
.mc-status-bar .dot.warn    { background: var(--mc-amber);  color: var(--mc-amber); }
.mc-status-bar .dot.error   { background: var(--mc-danger); color: var(--mc-danger); }
.mc-status-bar .dot.cyan    { background: var(--mc-cyan);   color: var(--mc-cyan); }

@keyframes mc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ── Pipeline canvas ────────────────────────────────────────────────── */
.mc-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 220px;
}

/* SVG layer for connecting edges */
.mc-edges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ── Stage node ─────────────────────────────────────────────────────── */
.mc-node {
  position: relative;
  background: linear-gradient(180deg, var(--mc-elev) 0%, var(--mc-surface) 100%);
  border: 1px solid var(--mc-border);
  padding: 16px 14px 14px;
  margin: 0 18px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}
.mc-node:hover {
  transform: translateY(-2px);
  border-color: var(--mc-cyan);
  box-shadow: 0 0 0 1px var(--mc-cyan), 0 12px 32px -16px rgba(45, 74, 62, 0.32);
}
.mc-node.active {
  border-color: var(--mc-cyan);
  box-shadow: inset 0 0 0 1px var(--mc-cyan-dim);
}
.mc-node.running {
  border-color: var(--mc-amber);
  animation: mc-running 2s ease-in-out infinite;
}
.mc-node.complete { border-color: var(--mc-green); }
.mc-node.error    { border-color: var(--mc-danger); }

@keyframes mc-running {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 99, 58, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(184, 99, 58, 0.22); }
}

.mc-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mc-border);
}
.mc-node-idx {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mc-cyan);
  letter-spacing: 0.1em;
}
.mc-node-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  color: var(--mc-deep);
}
.mc-node.running  .mc-node-status { color: var(--mc-amber); }
.mc-node.complete .mc-node-status { color: var(--mc-green); }
.mc-node.error    .mc-node-status { color: var(--mc-danger); }
.mc-node.active   .mc-node-status { color: var(--mc-cyan); }

.mc-node-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.15;
}
.mc-node-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mc-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: -4px;
}

.mc-node-metrics {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--mc-border);
}
.mc-metric {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
}
.mc-metric .k { color: var(--mc-muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 9px; }
.mc-metric .v { color: var(--mc-text); font-weight: 600; }
.mc-metric .v.cyan  { color: var(--mc-cyan); }
.mc-metric .v.green { color: var(--mc-green); }
.mc-metric .v.amber { color: var(--mc-amber); }

/* ── Detail drawer ──────────────────────────────────────────────────── */
.mc-drawer {
  margin-top: 22px;
  border: 1px solid var(--mc-border);
  background: var(--mc-surface);
  display: none;
}
.mc-drawer.open { display: block; animation: mc-slide 0.32s ease; }
@keyframes mc-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mc-border);
  background: var(--mc-elev);
}
.mc-drawer-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}
.mc-drawer-title small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--mc-cyan);
  margin-left: 10px;
  letter-spacing: 0.08em;
}
.mc-drawer-close {
  background: none;
  border: 1px solid var(--mc-border);
  color: var(--mc-muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.06em;
}
.mc-drawer-close:hover { color: var(--mc-cyan); border-color: var(--mc-cyan); }
.mc-drawer-body { padding: 18px 20px; min-height: 120px; font-size: 13px; line-height: 1.55; }
.mc-drawer-body code {
  font-family: var(--mono);
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  padding: 1px 6px;
  font-size: 11px;
}

/* ── Action ribbon ──────────────────────────────────────────────────── */
.mc-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.mc-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--mc-elev);
  border: 1px solid var(--mc-border);
  color: var(--mc-text);
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mc-btn:hover { border-color: var(--mc-cyan); color: var(--mc-cyan); }
.mc-btn.primary {
  background: var(--mc-cyan);
  color: var(--mc-bg);
  border-color: var(--mc-cyan);
  font-weight: 600;
}
.mc-btn.primary:hover { background: var(--mc-text); border-color: var(--mc-text); color: var(--mc-bg); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mc-canvas { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mc-node   { margin: 0; }
  .mc-edges  { display: none; }
}
@media (max-width: 640px) {
  .mc-canvas { grid-template-columns: 1fr; }
  .mc-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}