/* ============================================================
   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-red  .gn-core:hover .gn-box-core .material-symbols-outlined { color: #131313 !important; }

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-green .gn-core:hover .gn-box-core .material-symbols-outlined { color: #0a0a0a !important; }

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; }
body.theme-purple .gn-core:hover .gn-box-core .material-symbols-outlined { color: #131313 !important; }

/* ── 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; }

/* ================================================================
   Theme colour overrides — Tailwind utility classes
   Kept in graph.css (not processed by Tailwind) so the optimizer
   cannot strip "body.theme-X" parent scopes from escaped selectors.
   Every hover rule is a standalone declaration — no grouped
   selector lists — to prevent future CSS minifier issues.
   ================================================================ */

/* ── Red theme ──────────────────────────────────────────────── */
body.theme-red {
  background-image:
    linear-gradient(rgba(255, 42, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 42, 42, 0.05) 1px, transparent 1px);
}
body.theme-red .scan-line { background: rgba(255, 42, 42, 0.05); }
body.theme-red .text-primary-fixed-dim { color: #ff2a2a !important; }
body.theme-red .text-primary-container  { color: #ff2a2a !important; }
body.theme-red .text-on-surface-variant { color: #ccb2b2 !important; }
body.theme-red .text-outline            { color: #967e7e !important; }
body.theme-red .text-on-primary         { color: #260000 !important; }
body.theme-red .bg-primary-fixed-dim    { background-color: #ff2a2a !important; }
body.theme-red .bg-primary-container    { background-color: #ff2438 !important; }
body.theme-red .border-outline-variant  { border-color: #4b3737 !important; }
body.theme-red .border-outline          { border-color: #967e7e !important; }
body.theme-red .border-primary-fixed-dim { border-color: #ff2a2a !important; }
body.theme-red .border-primary-container { border-color: #ff2a2a !important; }
/* hover / focus — standalone rules, NOT grouped with other selectors */
body.theme-red .hover\:bg-transparent:hover            { background-color: transparent !important; }
body.theme-red .hover\:bg-primary-fixed-dim:hover     { background-color: #ff2a2a !important; }
body.theme-red .hover\:border-primary-fixed-dim:hover { border-color: #ff2a2a !important; }
body.theme-red .focus\:border-primary-fixed-dim:focus { border-color: #ff2a2a !important; }
body.theme-red .hover\:text-primary:hover             { color: #ff2a2a !important; }
body.theme-red .hover\:text-primary-container:hover   { color: #ff2a2a !important; }
body.theme-red .hover\:text-primary-fixed-dim:hover   { color: #ff2a2a !important; }
body.theme-red .hover\:text-background:hover          { color: #131313 !important; }
body.theme-red .group:hover .group-hover\:text-primary-fixed-dim  { color: #ff2a2a !important; }
body.theme-red .group:hover .group-hover\:border-primary-fixed-dim { border-color: #ff2a2a !important; }
body.theme-red .group:hover .group-hover\:bg-primary-fixed-dim    { background-color: #ff2a2a !important; }
body.theme-red .theme-shape {
  clip-path: polygon(50% 4%, 96% 94%, 4% 94%);
  transform: translateY(-3px);
}

/* ── Green theme ────────────────────────────────────────────── */
body.theme-green {
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px);
  --color-discount: #2aa8ff;
}
body.theme-green .scan-line { background: rgba(57, 255, 20, 0.05); }
body.theme-green .text-primary-fixed-dim { color: #39ff14 !important; }
body.theme-green .text-primary-container  { color: #39ff14 !important; }
body.theme-green .text-on-surface-variant { color: #b2d6b2 !important; }
body.theme-green .text-outline            { color: #7e9680 !important; }
body.theme-green .text-on-primary         { color: #002600 !important; }
body.theme-green .bg-primary-fixed-dim    { background-color: #39ff14 !important; }
body.theme-green .bg-primary-container    { background-color: #2ce610 !important; }
body.theme-green .border-outline-variant  { border-color: #374b37 !important; }
body.theme-green .border-outline          { border-color: #7e9680 !important; }
body.theme-green .border-primary-fixed-dim { border-color: #39ff14 !important; }
body.theme-green .border-primary-container { border-color: #39ff14 !important; }
body.theme-green .hover\:bg-transparent:hover            { background-color: transparent !important; }
body.theme-green .hover\:bg-primary-fixed-dim:hover     { background-color: #39ff14 !important; }
body.theme-green .hover\:border-primary-fixed-dim:hover { border-color: #39ff14 !important; }
body.theme-green .focus\:border-primary-fixed-dim:focus { border-color: #39ff14 !important; }
body.theme-green .hover\:text-primary:hover             { color: #39ff14 !important; }
body.theme-green .hover\:text-primary-container:hover   { color: #39ff14 !important; }
body.theme-green .hover\:text-primary-fixed-dim:hover   { color: #39ff14 !important; }
body.theme-green .hover\:text-background:hover          { color: #131313 !important; }
body.theme-green .group:hover .group-hover\:text-primary-fixed-dim  { color: #39ff14 !important; }
body.theme-green .group:hover .group-hover\:border-primary-fixed-dim { border-color: #39ff14 !important; }
body.theme-green .group:hover .group-hover\:bg-primary-fixed-dim    { background-color: #39ff14 !important; }
body.theme-green .theme-shape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: translateY(-3px);
}

/* ── Purple theme ───────────────────────────────────────────── */
body.theme-purple {
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
}
body.theme-purple .scan-line { background: rgba(168, 85, 247, 0.05); }
body.theme-purple .text-primary-fixed-dim { color: #a855f7 !important; }
body.theme-purple .text-primary-container  { color: #a855f7 !important; }
body.theme-purple .text-on-surface-variant { color: #c4b2d6 !important; }
body.theme-purple .text-outline            { color: #8e7e96 !important; }
body.theme-purple .text-on-primary         { color: #1a0026 !important; }
body.theme-purple .bg-primary-fixed-dim    { background-color: #a855f7 !important; }
body.theme-purple .bg-primary-container    { background-color: #9333ea !important; }
body.theme-purple .border-outline-variant  { border-color: #3d374b !important; }
body.theme-purple .border-outline          { border-color: #8e7e96 !important; }
body.theme-purple .border-primary-fixed-dim { border-color: #a855f7 !important; }
body.theme-purple .border-primary-container { border-color: #a855f7 !important; }
body.theme-purple .hover\:bg-transparent:hover            { background-color: transparent !important; }
body.theme-purple .hover\:bg-primary-fixed-dim:hover     { background-color: #a855f7 !important; }
body.theme-purple .hover\:border-primary-fixed-dim:hover { border-color: #a855f7 !important; }
body.theme-purple .focus\:border-primary-fixed-dim:focus { border-color: #a855f7 !important; }
body.theme-purple .hover\:text-primary:hover             { color: #a855f7 !important; }
body.theme-purple .hover\:text-primary-container:hover   { color: #a855f7 !important; }
body.theme-purple .hover\:text-primary-fixed-dim:hover   { color: #a855f7 !important; }
body.theme-purple .hover\:text-background:hover          { color: #131313 !important; }
body.theme-purple .group:hover .group-hover\:text-primary-fixed-dim  { color: #a855f7 !important; }
body.theme-purple .group:hover .group-hover\:border-primary-fixed-dim { border-color: #a855f7 !important; }
body.theme-purple .group:hover .group-hover\:bg-primary-fixed-dim    { background-color: #a855f7 !important; }
body.theme-purple .theme-shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: translateY(-3px);
}