/* ============================================================
   graph.css — custom styles for the interactive graph and nav.
   This file is NOT generated by Tailwind. Do not overwrite it.
   site.css can be regenerated freely — this file is permanent.
   ============================================================ */

/* ── Graph container positioning ──────────────────────────── */
#graphContainer { position: relative; }

/* ── Interactive graph nodes ──────────────────────────────── */
.gn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  text-decoration: none;
}
.gn:active { cursor: grabbing; }

.gn-box {
  width: 40px;
  height: 40px;
  border: 1px solid #7e9096;
  background: #131313;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms, background 150ms;
}
.gn-box .material-symbols-outlined {
  color: #7e9096;
  font-size: 20px;
  transition: color 150ms;
}
.gn:hover .gn-box { border-color: #2aa8ff; }
.gn:hover .gn-box .material-symbols-outlined { color: #2aa8ff; }

.gn-box-core {
  width: 48px;
  height: 48px;
  border: 2px solid #2aa8ff;
  transform: rotate(45deg);
}
.gn-box-core .material-symbols-outlined {
  transform: rotate(-45deg);
  color: #2aa8ff;
  font-size: 22px;
}
.gn-core:hover .gn-box-core { background: #2aa8ff; }
.gn-core:hover .gn-box-core .material-symbols-outlined { color: #131313; }

.gn-label {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b2c7d6;
  pointer-events: none;
  white-space: nowrap;
}
.gn-core .gn-label { color: #2aa8ff; }

/* ── Theme overrides — graph nodes ────────────────────────── */
body.theme-red  .gn-box-core { border-color: #ff2a2a; }
body.theme-red  .gn-box-core .material-symbols-outlined { color: #ff2a2a; }
body.theme-red  .gn-core .gn-label { color: #ff2a2a; }
body.theme-red  .gn:hover .gn-box { border-color: #ff2a2a; }
body.theme-red  .gn:hover .gn-box .material-symbols-outlined { color: #ff2a2a; }
body.theme-red  .gn-core:hover .gn-box-core { background: #ff2a2a; }

body.theme-green .gn-box-core { border-color: #39ff14; }
body.theme-green .gn-box-core .material-symbols-outlined { color: #39ff14; }
body.theme-green .gn-core .gn-label { color: #39ff14; }
body.theme-green .gn:hover .gn-box { border-color: #39ff14; }
body.theme-green .gn:hover .gn-box .material-symbols-outlined { color: #39ff14; }
body.theme-green .gn-core:hover .gn-box-core { background: #39ff14; }

body.theme-purple .gn-box-core { border-color: #a855f7; }
body.theme-purple .gn-box-core .material-symbols-outlined { color: #a855f7; }
body.theme-purple .gn-core .gn-label { color: #a855f7; }
body.theme-purple .gn:hover .gn-box { border-color: #a855f7; }
body.theme-purple .gn:hover .gn-box .material-symbols-outlined { color: #a855f7; }
body.theme-purple .gn-core:hover .gn-box-core { background: #a855f7; }

/* ── Nav active state ─────────────────────────────────────── */
.nav-brand-active {
  color: #2aa8ff;
  border-bottom: 1px solid #2aa8ff;
  padding-bottom: 2px;
}
.nav-link-active {
  color: #2aa8ff !important;
  border-bottom: 1px solid #2aa8ff;
  padding-bottom: 4px;
}
body.theme-red    .nav-brand-active,
body.theme-red    .nav-link-active { color: #ff2a2a !important; border-bottom-color: #ff2a2a !important; }
body.theme-green  .nav-brand-active,
body.theme-green  .nav-link-active { color: #39ff14 !important; border-bottom-color: #39ff14 !important; }
body.theme-purple .nav-brand-active,
body.theme-purple .nav-link-active { color: #a855f7 !important; border-bottom-color: #a855f7 !important; }