:root {
  /* Brand colors — OpenEvo teal/gold accents, layered on top of the shared
     surface/text/border/status tokens vendored from openevo-core's
     design-system/tokens.css (linked before this file in index.html). This file
     only defines its own component-level names; it does not redeclare
     surfaces/text/borders so a future tokens.css update flows straight through. */
  --primary: #1f7a70;
  --primary-hover: #145e56;
  --primary-light: rgba(31, 122, 112, 0.14);

  --secondary: #c9a34e;
  --secondary-hover: #ab8640;
  --secondary-light: rgba(201, 163, 78, 0.16);

  --accent: #5fd6c4;
  --accent-hover: #3dbfac;
  --accent-light: rgba(95, 214, 196, 0.16);

  /* Mapped onto tokens.css (already light/dark-aware via its own
     prefers-color-scheme + [data-theme] blocks) */
  --bg-primary: var(--surface-2);
  --bg-secondary: var(--page-plane);
  --bg-tertiary: var(--surface-1);
  --text-tertiary: var(--text-muted);
  --border-light: var(--border);
  --border-medium: var(--border-strong);
  --border-dark: var(--gridline);

  /* Type scale (previously referenced throughout this file but never defined) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Hero band (header/footer) — dark OpenEvo palette, independent of the light
     functional surfaces above; sampled from the hero-bg.png artwork itself. */
  --hero-bg-dark: #0d1220;
  --hero-ink: #eef6f4;
  --hero-ink-dim: #b9cbc8;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* Light/dark theme switching for surfaces, text, and borders is handled entirely
   by the vendored tokens.css (prefers-color-scheme + [data-theme] toggle) — this
   file's --bg-*/--text-tertiary/--border-* aliases above just follow it. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.6;
}

/* Topbar — hero band, sampled from the same hero-bg.png artwork used across the
   OpenEvo ecosystem's presentation material, dimmed for text legibility. */
.topbar {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5) var(--space-6);
  background-image:
    linear-gradient(120deg, rgba(14, 30, 34, 0.62) 0%, rgba(20, 34, 46, 0.55) 55%, rgba(14, 30, 34, 0.68) 100%),
    url('brand/hero-bg.png');
  background-size: cover;
  background-position: center 30%;
  color: var(--hero-ink);
  box-shadow: var(--shadow-md);
}

.topbar-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: 1400px;
  margin: 0 auto;
}

.topbar-text h1 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--hero-ink);
}

.tagline {
  margin: 0;
  color: var(--hero-ink-dim);
  font-size: var(--text-sm);
  max-width: 60ch;
}

/* Brand logo row — OpenEvo wordmark + NetLogo attribution */
.brand-logos {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.brand-logos .openevo-logo {
  /* The wordmark's own ink is dark navy, not white — a light backing plate
     keeps it legible regardless of how the hero art falls behind it. */
  height: clamp(28px, 3vw, 36px);
  width: auto;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.brand-logos .logo-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
}

.netlogo-credit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--hero-ink-dim);
  text-decoration: none;
  white-space: nowrap;
}

.netlogo-credit:hover {
  color: var(--hero-ink);
}

.netlogo-credit img {
  height: 22px;
  width: 22px;
  border-radius: 6px;
}

/* Layout */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 340px;
  gap: 0;
  min-height: 0;
}

.layout.sidebar-collapsed { grid-template-columns: 40px minmax(0, 1fr) 340px; }
.layout.details-collapsed { grid-template-columns: 320px minmax(0, 1fr) 40px; }
.layout.sidebar-collapsed.details-collapsed { grid-template-columns: 40px minmax(0, 1fr) 40px; }

@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .layout.sidebar-collapsed,
  .layout.sidebar-collapsed.details-collapsed {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .details {
    display: none;
  }
}

@media (max-width: 768px) {
  .layout,
  .layout.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
}

/* Sidebar */
.sidebar, .details {
  position: relative;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  padding: var(--space-4);
}

.details {
  border-right: none;
  border-left: 1px solid var(--border-light);
}

/* Collapsible sidebar/details panels — collapsed state shrinks the aside to
   a thin strip holding just the toggle button; content is hidden rather than
   scaled down, since 40px isn't enough room to render it usefully. */
.sidebar.collapsed,
.details.collapsed {
  padding: var(--space-3) 0;
  overflow: visible;
}

.sidebar.collapsed .sidebar-inner,
.details.collapsed .details-inner {
  display: none;
}

.panel-toggle {
  position: absolute;
  top: var(--space-3);
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.panel-toggle:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* Anchored to each panel's own inner edge (never straddling the border into
   the neighboring grid cell) so it can't overlap the viewer's own maximize
   button when the details panel collapses down to a 40px strip. */
.panel-toggle-left {
  right: var(--space-2);
}

.panel-toggle-right {
  left: var(--space-2);
}

/* Filters */
.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.filters input, .filters select {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Model List */
.model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.model-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  background: var(--bg-primary);
  transition: all var(--transition-base);
}

.model-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.model-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
  background: var(--primary-light);
}

.model-item h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.model-item .meta-line {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Viewer */
.viewer {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  background: var(--bg-secondary);
}

.frame-wrap {
  flex: 1;
  position: relative;
  background: var(--bg-primary);
}

#model-frame {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  border: none;
  display: block;
  background: #fff;
}

.viewer-maximize-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.viewer-maximize-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

#model-frame-wrap:fullscreen,
#model-frame-wrap:-webkit-full-screen {
  background: var(--bg-primary);
  display: flex;
}

#model-frame-wrap:fullscreen #model-frame,
#model-frame-wrap:-webkit-full-screen #model-frame {
  height: 100vh;
  min-height: 0;
}

.frame-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  opacity: 1;
  transition: opacity var(--transition-base, 0.2s ease);
  pointer-events: none;
}

.frame-loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.frame-loading-overlay p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* Details Panel */
.details h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 var(--space-3) 0;
  color: var(--text-primary);
}

.details p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.details .section-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3) 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  gap: var(--space-2);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--hero-bg-dark);
}

.btn-secondary:hover {
  background: var(--secondary-hover);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn-outline:hover {
  background: var(--bg-secondary);
  border-color: var(--border-dark);
}

.details a.btn {
  display: inline-flex;
  margin: var(--space-2) var(--space-3) var(--space-2) 0;
}

.details a.link-line {
  display: block;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.details a.link-line:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.chip:hover {
  background: var(--border-medium);
}

.chip-concept {
  background: var(--primary-light);
  color: var(--primary);
}

.chip-grade {
  background: var(--secondary-light);
  color: #7a5f28; /* darker than --secondary itself: gold at chip-text size fails
                     WCAG AA (~2:1) against a light tint background */
}

/* Footer — slim dark band matching the hero header, for a bookend feel */
.footer {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-xs);
  color: var(--hero-ink-dim);
  background: var(--hero-bg-dark);
}

.footer a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: var(--hero-ink);
  text-decoration: underline;
}

/* Loading States */
.loading-skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-light) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  border: 3px solid var(--border-light);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: var(--space-8) auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}

.empty-state p {
  margin-bottom: var(--space-4);
}

/* App Menu Bar — primary navigation between view modes (Explore / Graph),
   integrated directly under the hero band so switching modes doesn't
   require hunting through the sidebar. */
.app-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}

.app-menubar-home {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-menubar-home:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.app-tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
}

.app-tab {
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.app-tab:hover {
  color: var(--text-primary);
  background: var(--bg-primary);
}

.app-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 560px) {
  .app-menubar {
    justify-content: center;
  }
  .app-menubar-home {
    display: none;
  }
}

/* Section Header */
.section-header {
  margin: var(--space-6) 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.section-header h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Digital Lab Notebook */
.lab-notebook-panel {
  background: var(--bg-primary);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

.lab-notebook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-light);
}

.lab-notebook-header h3 {
  margin: 0;
  color: var(--text-primary);
}

.notebook-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.notebook-tab {
  padding: 10px 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notebook-tab:hover {
  background: var(--bg-tertiary);
}

.notebook-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.notebook-section {
  display: none;
}

.notebook-section.active {
  display: block;
}

.observation-input {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1em;
  resize: vertical;
  margin-bottom: 15px;
}

.observation-input:focus {
  outline: none;
  border-color: var(--primary);
}

.observations-list {
  max-height: 300px;
  overflow-y: auto;
}

.observation-item {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 10px;
  border-left: 3px solid var(--primary);
}

.observation-time {
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.reflection-section {
  margin-bottom: 20px;
}

.reflection-section h4 {
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

.reflection-input {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 2px solid var(--border-medium);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95em;
  resize: vertical;
}

.notebook-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid var(--border-light);
}

@media print {
  .notebook-actions {
    display: none;
  }
}

/* Network Graph Mode */
.graph-mode {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  animation: fadeIn 0.3s ease;
}

.graph-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.graph-header .graph-maximize-btn {
  /* Overrides .viewer-maximize-btn's absolute positioning (meant for
     overlaying a canvas) -- here it just sits at the end of the header row. */
  position: static;
  flex: 0 0 auto;
}

#graph-mode:fullscreen,
#graph-mode:-webkit-full-screen {
  background: var(--bg-primary);
  padding: var(--space-5);
}

#graph-mode:fullscreen .graph-svg,
#graph-mode:-webkit-full-screen .graph-svg {
  min-height: 0;
}

/* Bridge demo result, appended into the details panel from a graph-node
   double-click (assets/graph-explorer.js's openInExplorer/renderBridgeStatus) */
.bridge-status {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--primary-light);
  background: var(--primary-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.bridge-status code {
  background: var(--bg-primary);
}

.bridge-status-sub {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.graph-header h2 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-xl);
  color: var(--text-primary);
}

.graph-header p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 80ch;
}

.graph-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 0;
}

.graph-controls {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-right: var(--space-2);
}

.control-group {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.control-group h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  font-weight: 600;
}

.control-group label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.control-group label input[type="range"] {
  display: block;
  width: 100%;
  accent-color: var(--primary);
}

.control-group .checkline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.control-group .checkline input {
  accent-color: var(--primary);
}

.graph-buttons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.graph-buttons .btn {
  flex: 1;
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-xs);
}

.control-group input[type="search"] {
  width: 100%;
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-xs);
  box-sizing: border-box;
}

.graph-checklist {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.graph-checklist label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  cursor: pointer;
}

.graph-checklist input {
  accent-color: var(--primary);
}

.graph-canvas-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  overflow: hidden;
}

.graph-svg {
  width: 100%;
  height: 100%;
  min-height: 50vh;
  display: block;
  cursor: grab;
}

.graph-svg:active {
  cursor: grabbing;
}

.graph-svg .gnode-model circle {
  fill: var(--primary);
  stroke: var(--primary-hover);
  stroke-width: 1.5;
}

.graph-svg .gnode-concept circle {
  fill: var(--secondary);
  stroke: var(--secondary-hover);
  stroke-width: 1.5;
}

.graph-svg .gnode-literature circle {
  fill: #2c3a63;
  stroke: #1c2740;
  stroke-width: 1.5;
}

.graph-svg .gnode-literature text {
  font-size: 8px;
}

/* A concept with no grounding literature yet -- hollow/dashed rather than
   solid, so the gap the roadmap already flagged is visible in the graph
   itself, not just in a status table. */
.graph-svg .gnode-ungrounded circle {
  fill: var(--bg-primary);
  stroke: var(--secondary);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.graph-svg .gnode text {
  font-size: 10px;
  font-family: var(--font, inherit);
  fill: var(--text-primary);
  paint-order: stroke;
  stroke: var(--bg-primary);
  stroke-width: 3px;
  pointer-events: none;
  user-select: none;
}

.graph-svg .gnode {
  cursor: pointer;
}

.graph-svg .gnode.dimmed {
  opacity: 0.15;
}

.graph-svg .gedge {
  stroke: var(--border-dark);
  fill: none;
  pointer-events: none;
}

.graph-svg .gedge.gedge-model-model {
  stroke: var(--primary);
  opacity: 0.55;
}

.graph-svg .gedge.gedge-concept-concept {
  stroke: var(--secondary);
  opacity: 0.55;
}

.graph-svg .gedge.gedge-lit-concept {
  stroke: #2c3a63;
  opacity: 0.4;
  stroke-dasharray: 2 2;
}

.graph-svg .gedge.gedge-lit-lit {
  stroke: #2c3a63;
  opacity: 0.6;
}

.graph-svg .gedge.dimmed {
  opacity: 0.05;
}

.graph-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: var(--hero-bg-dark, #0d1220);
  color: #eef6f4;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  max-width: 240px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.graph-tooltip.visible {
  opacity: 1;
}

.graph-legend {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.graph-legend span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.legend-model { background: var(--primary); }
.legend-dot.legend-concept { background: var(--secondary); }
.legend-dot.legend-literature { background: #2c3a63; }

@media (max-width: 1024px) {
  .graph-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .graph-controls {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 220px;
  }
  .control-group {
    flex: 1 1 200px;
  }
}