/* =================================================================
 * System-Map Dashboard — Phase 1
 * Tokens lifted verbatim from docs/system-map/design-brief.md §2–§5.
 * No improvisation: every hex / size / weight is brief-sourced.
 * ================================================================= */

:root {
  /* §2 surfaces / borders / text */
  --bg-canvas:        #08090a;
  --bg-chrome:        #0e0f11;
  --bg-panel:         #16181c;
  --bg-card:          #1c1f23;
  --bg-card-hover:    #23272d;
  --bg-input:         #0b0c0e;
  --border-default:   #23262b;
  --border-hover:     #3a3f47;
  --border-edge:      #2a2e35;
  --text-primary:     #f7f8f8;
  --text-secondary:   #b4b8bf;
  --text-muted:       #6e7681;

  /* §2 per-node-type accents (also injected into Cytoscape via dashboard.js) */
  --node-cortex:      #4CC9F0;
  --node-nowdrum:     #C8A4FF;
  --node-fretboard:   #FDE047;
  --node-floorspeak:  #86EFAC;
  --node-rule:        #6E7681;
  --node-hook:        #F87171;
  --node-autoresearch:#FFD166;
  --node-learnings:   #4ADE80;
  --node-architecture:#FF8E72;
  --node-memory:      #C4B5FD;
  --node-friction:    #EF4444;
  /* Phase 2 A: VPS Layer 5 — design-brief §2.1 */
  --node-vps-timer:   #00B7C2;
  --node-vps-service: #0EA5E9;
  --node-vps-cluster: #6E7681;

  /* §4 spacing — strict 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* §4 chrome geometry */
  --header-h: 52px;
  --footer-h: 24px;
  --panel-w:  380px;
}

/* §3 typography */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
  overflow: hidden;
}

/* =================================================================
 * App shell — grid: header / main / footer
 * ================================================================= */
.app {
  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  height: 100vh;
  width: 100vw;
}

/* =================================================================
 * Header (§5 component conventions)
 * ================================================================= */
.header {
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.count-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.count-badge .total { color: var(--text-primary); }
.count-badge .active { color: var(--node-cortex); }
.count-badge .library { color: var(--text-muted); }

/* search */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
  display: flex;
  justify-content: center;
}
.search-input {
  width: 100%;
  height: 32px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 0 56px 0 var(--space-3);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 120ms ease;
}
.search-input:focus { border-color: var(--border-hover); }
.search-input::placeholder { color: var(--text-muted); }

.kbd-pill {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
}

/* layer toggles */
.toggles {
  display: flex;
  gap: var(--space-2);
}
.toggle-pill {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
  transition: all 120ms ease;
}
.toggle-pill.active {
  color: var(--text-primary);
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

/* =================================================================
 * Main: graph + side panel
 * ================================================================= */
.main {
  display: grid;
  grid-template-columns: 1fr var(--panel-w);
  min-height: 0;
}

.graph-wrap {
  position: relative;
  background:
    radial-gradient(circle, #15171a 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg-canvas);
  background-position: center;
  overflow: hidden;
}

#cy {
  position: absolute;
  inset: 0;
}

/* legend — bottom-left */
.legend {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background: rgba(22, 24, 28, 0.86);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 10;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.legend-diamond {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

/* =================================================================
 * Side panel
 * ================================================================= */
.panel {
  background: var(--bg-panel);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  padding: var(--space-6);
  text-align: center;
  line-height: 22px;
}

.panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.panel-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.panel-eyebrow .type-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.panel-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.panel-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.panel-description {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  margin-top: var(--space-3);
}

.panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.chip.active { color: var(--node-floorspeak); border-color: rgba(134,239,172,0.35); }
.chip.warn { color: var(--node-autoresearch); border-color: rgba(255,209,102,0.35); }
.chip.alert { color: var(--node-friction); border-color: rgba(239,68,68,0.35); }

.panel-section {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}
.panel-section h3 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.metric-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}
.metric-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.connections-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
}
.connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.connection-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}
.connection-row .row-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.connection-row .row-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.connection-row .row-text {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connection-row .row-edge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: lowercase;
  flex-shrink: 0;
  margin-left: var(--space-2);
}

.panel-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  background: var(--bg-chrome);
  margin-top: auto;
}
.btn-primary {
  width: 100%;
  height: 36px;
  background: var(--text-primary);
  color: var(--bg-canvas);
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease;
}
.btn-primary:hover { filter: brightness(0.92); }

/* =================================================================
 * Footer
 * ================================================================= */
.footer {
  background: var(--bg-chrome);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.footer .pipe {
  color: var(--border-default);
  margin: 0 var(--space-3);
}
.footer .accent { color: var(--node-cortex); }
.footer .branch { color: var(--text-primary); }

/* small scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* =================================================================
 * Phase 2 A: VPS Layer 5 — footer badge + layer-5 toggle pill
 * ================================================================= */
.footer .vps-warn {
  color: #EF4444;
  font-weight: 600;
}

/* Layer 5 (VPS) toggle pill — uses same .toggle-pill base from header,
   gets a cyan-teal tint when active to echo the VPS node palette */
.toggle-pill[data-layer="5"].active {
  color: var(--node-vps-timer);
  border-color: rgba(0, 183, 194, 0.4);
}

/* =================================================================
 * Phase 2 D: Tippy tooltip theme — systemmap
 * ================================================================= */
.tippy-box[data-theme~='systemmap'] {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
  box-shadow: none;   /* design-brief: data is the only thing that glows */
  max-width: 280px;
}
.tippy-box[data-theme~='systemmap'] .tippy-arrow {
  color: var(--bg-panel);
}
.tippy-box[data-theme~='systemmap'] .tippy-content {
  padding: 8px 12px;
}
.tippy-box[data-theme~='systemmap'] b {
  color: var(--text-primary);
  font-weight: 600;
}
.tippy-box[data-theme~='systemmap'] .tt-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 4px;
  vertical-align: middle;
}

/* =================================================================
 * Phase 2 E: Back button — panel header navigation
 * ================================================================= */
.panel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px 0;
}
.panel-back {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.panel-back:hover:not(:disabled) {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.panel-back:disabled {
  opacity: 0.4;
  cursor: default;
}