/* ============================================
   dep_graph.css - Dependency Graph Page Styles
   Used by: dep_graph.html (full page), graph modals, embedded graphs
   Depends on: common.css (must be loaded first for CSS variables)
   ============================================ */

/* ========== Graph Section Container ========== */
.graph-section {
  margin: 2rem 0;
}

.dep-graph-container {
  position: relative;
  width: 100%;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  background: var(--bp-bg-alt);
  overflow: hidden;
}

/* ========== Graph Toolbar ========== */
.dep-graph-toolbar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  padding: 0.25rem;
  max-width: 220px;
}

.dep-graph-toolbar button {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bp-border);
  border-radius: 3px;
  background: var(--bp-bg);
  color: var(--bp-text);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: background 0.15s ease;
}

.dep-graph-toolbar button:hover {
  background: var(--bp-bg-alt);
}

.dep-graph-toolbar button:active {
  background: var(--bp-border);
}

/* Fit button expands to fill available width */
.dep-graph-toolbar button#graph-fit {
  flex: 1;
}

/* Separator between zoom and pan button groups */
.dep-graph-toolbar-sep {
  width: 1px;
  background: var(--bp-border);
  margin: 0 0.125rem;
}

/* Pan buttons */
.dep-graph-toolbar button.pan-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.375rem;
}

/* ========== Graph Viewport (pan/zoom area) ========== */
.dep-graph-viewport {
  position: relative;
  z-index: 1;  /* Below controls (z-index: 20) so legend isn't covered by pan/zoom */
  width: 100%;
  min-height: 200px;
  max-height: 600px;
  overflow: hidden;
  cursor: grab;
  background: var(--sbs-graph-bg);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.dep-graph-viewport:active {
  cursor: grabbing;
}

/* Subgraph viewport on individual node pages - override base max-height */
.dg-subgraph-viewport {
  max-height: none;
  z-index: auto;
}

/* ========== Graph SVG Container ========== */
.dep-graph-svg {
  transform-origin: 0 0;
  will-change: transform;
  display: inline-block;  /* Shrink-wrap to SVG size */
  user-select: none;
  -webkit-user-select: none;
}

.dep-graph-svg.dragging {
  transition: none !important;
}

.dep-graph-svg svg {
  display: block;
  background: var(--sbs-graph-bg);
}

.dep-graph-svg text,
.dep-graph-svg tspan {
  pointer-events: none;  /* Prevent text from interfering with drag */
  user-select: none;
}

/* ========== Graph Placeholder ========== */
.dep-graph-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--bp-text-muted);
  font-style: italic;
}

/* ========== Node Highlight Animation ========== */
.node-highlight {
  animation: node-flash 2s ease-out;
}

@keyframes node-flash {
  0%, 100% { box-shadow: none; }
  20%, 80% { box-shadow: 0 0 0 4px var(--bp-primary); }
}

/* ========== Full-page Graph Styles ========== */
.dep-graph-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.dep-graph-page .wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.dep-graph-page .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
}

.dep-graph-fullpage {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dep-graph-fullpage .dep-graph-viewport {
  flex: 1;
  height: 90vh !important;
  max-height: none;
}

/* ========== Graph Header with Link ========== */
.graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.graph-header h2 {
  margin: 0;
}

.graph-fullpage-link {
  color: var(--bp-primary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  transition: background-color 0.2s;
}

.graph-fullpage-link:hover {
  background-color: var(--bp-bg-alt);
  text-decoration: none;
}

/* ========== Graph Link Card (Homepage) ========== */
.graph-link-card {
  margin: 2rem 0;
}

.graph-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.graph-card {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: var(--bp-bg-alt);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  transition: background-color 0.2s, border-color 0.2s;
}

.graph-card:hover {
  background-color: var(--sbs-graph-card-hover);
  border-color: var(--bp-primary);
}

.graph-card-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-primary);
  margin-right: 1.5rem;
}

.graph-card-icon svg {
  width: 48px;
  height: 48px;
}

.graph-card-content {
  flex: 1;
}

.graph-card-content h3 {
  margin: 0 0 0.5rem 0;
  color: var(--bp-text);
  font-size: 1.25rem;
}

.graph-card-content p {
  margin: 0;
  color: var(--bp-text-muted);
  font-size: 0.95rem;
}

.graph-card-arrow {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--bp-primary);
  margin-left: 1rem;
}

/* ========== Graph Legend (Collapsible) ========== */
.graph-legend {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--bp-bg-alt);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
}

.graph-legend .title {
  display: flex;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.graph-legend .btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 0.5rem;
  padding: 3px;
}

.graph-legend .bar {
  width: 18px;
  height: 2px;
  background: var(--bp-text);
}

.graph-legend dl.legend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

.graph-legend dt {
  font-weight: 600;
  color: var(--bp-text);
}

.graph-legend dd {
  margin: 0;
  color: var(--bp-text-muted);
}

/* ========== Dependency Graph Modals ========== */
/* Note: Base .dep-modal-container, .dep-modal-content, .dep-closebtn
   are defined in common.css. This section adds graph-specific extensions. */

.dep-modal-body {
  padding-top: 10px;
}

.dep-modal-header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bp-border);
}

.dep-modal-type {
  font-weight: bold;
  color: var(--bp-primary);
}

.dep-modal-label {
  color: var(--bp-text);
}

.dep-modal-links {
  margin-top: 1rem;
}

.dep-modal-links a {
  color: var(--bp-primary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  display: inline-block;
}

.dep-modal-links a:hover {
  background-color: var(--bp-bg-alt);
}

/* Modal footer with blueprint link */
.dep-modal-footer {
  margin-top: 0.75rem;
  text-align: right;
}

.dep-modal-footer .blueprint-link {
  color: var(--sbs-link);
  text-decoration: none;
  font-size: 0.9rem;
}

.dep-modal-footer .blueprint-link:hover {
  text-decoration: underline;
  color: var(--sbs-link-hover);
}

/* SVG node click styling */
.dep-graph-svg .node {
  cursor: pointer;
}

/* Node hover highlight with smooth transition */
.dep-graph-svg .node ellipse,
.dep-graph-svg .node rect,
.dep-graph-svg .node polygon {
  transition: stroke-width 0.15s ease;
}

.dep-graph-svg .node:hover ellipse,
.dep-graph-svg .node:hover rect,
.dep-graph-svg .node:hover polygon {
  stroke-width: 3px;
}

/* ========== Static HTML Legend and Toolbar ========== */

/* Wrapper for controls + graph - uses grid for side-by-side layout */
.dep-graph-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
}

/* Combined controls container (legend + toolbar) */
.dep-graph-controls {
  position: static;  /* No longer absolute - grid handles positioning */
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: start;  /* Align to top of grid cell */
}

/* When toolbar is inside controls, remove its absolute positioning */
.dep-graph-controls .dep-graph-toolbar {
  position: static;
}

/* Compact legend styles */
.dep-graph-legend {
  background: var(--sbs-legend-bg);
  border: 1px solid var(--sbs-border);
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 0.875rem;
  color: var(--sbs-legend-text);
  min-width: 200px;
  width: max-content;
}

.dep-graph-legend .legend-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.dep-graph-legend .legend-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dep-graph-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dep-graph-legend .legend-item span:last-child {
  font-size: 0.8rem;
  white-space: nowrap;
}

.dep-graph-legend .legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

/* 7 Status Colors - use unified CSS variables */
.dep-graph-legend .legend-swatch.not-ready { background-color: var(--sbs-status-not-ready); }
.dep-graph-legend .legend-swatch.wip { background-color: var(--sbs-status-wip); }
.dep-graph-legend .legend-swatch.sorry { background-color: var(--sbs-status-sorry); }
.dep-graph-legend .legend-swatch.proven { background-color: var(--sbs-status-proven); }
.dep-graph-legend .legend-swatch.fully-proven { background-color: var(--sbs-status-fully-proven); }
.dep-graph-legend .legend-swatch.mathlib-ready { background-color: var(--sbs-status-mathlib-ready); }
.dep-graph-legend .legend-swatch.axiom { background-color: var(--sbs-status-axiom); }

/* Legend separator line between colors and shapes */
.dep-graph-legend .legend-separator {
  width: 100%;
  height: 1px;
  background-color: var(--sbs-legend-separator);
  margin: 0.5rem 0;
}

.dep-graph-legend .legend-shape {
  width: 16px;
  height: 12px;
  border: 1px solid var(--sbs-legend-shape-border);
  background: var(--sbs-legend-shape-bg);
}

.dep-graph-legend .legend-shape.ellipse {
  border-radius: 50%;
}

.dep-graph-legend .legend-shape.box {
  border-radius: 2px;
}

.dep-graph-legend .legend-shape.diamond {
  width: 12px;
  height: 12px;
  border: 1px solid var(--sbs-legend-shape-border, #333);
  background: var(--sbs-status-axiom);
  border-radius: 0;
  transform: rotate(45deg);
}

/* ========== Status Filter Bar ========== */
.dep-graph-filter-bar {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sbs-border, #e0e0e0);
}

.dep-graph-filter-bar .filter-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sbs-text-secondary, #666);
  margin-bottom: 0.375rem;
}

.dep-graph-filter-bar .filter-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.dep-graph-filter-bar .filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--sbs-text, #333);
  user-select: none;
}

.dep-graph-filter-bar .filter-toggle input[type="checkbox"] {
  display: none;
}

.dep-graph-filter-bar .filter-toggle .filter-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: opacity 0.15s;
}

.dep-graph-filter-bar .filter-toggle input:not(:checked) ~ .filter-swatch {
  opacity: 0.25;
}

.dep-graph-filter-bar .filter-toggle input:not(:checked) ~ span:last-child {
  opacity: 0.4;
  text-decoration: line-through;
}

.dep-graph-filter-bar .filter-count {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  color: var(--sbs-text-secondary, #666);
}

/* Filter swatch colors - reuse legend status variable pattern */
.dep-graph-filter-bar .filter-swatch.not-ready { background-color: var(--sbs-status-not-ready); }
.dep-graph-filter-bar .filter-swatch.wip { background-color: var(--sbs-status-wip); }
.dep-graph-filter-bar .filter-swatch.sorry { background-color: var(--sbs-status-sorry); }
.dep-graph-filter-bar .filter-swatch.proven { background-color: var(--sbs-status-proven); }
.dep-graph-filter-bar .filter-swatch.fully-proven { background-color: var(--sbs-status-fully-proven); }
.dep-graph-filter-bar .filter-swatch.mathlib-ready { background-color: var(--sbs-status-mathlib-ready); }
.dep-graph-filter-bar .filter-swatch.axiom { background-color: var(--sbs-status-axiom); }

/* ========== SBS Container in Modal ========== */
/* Ensure sbs-container displays properly in modal */
.dep-modal-content .sbs-container {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Flexible 50/50 instead of fixed 100ch */
  gap: 1.5rem;
  margin-left: 0;  /* Override the normal 3rem margin */
  margin-bottom: 1rem;
  max-width: 100%;  /* Prevent growing beyond modal */
  overflow: hidden;  /* Prevent content from pushing modal wider */
}

.dep-modal-content .sbs-heading,
.dep-modal-content .sbs-statement,
.dep-modal-content .sbs-proof-latex,
.dep-modal-content .sbs-signature,
.dep-modal-content .sbs-proof-lean,
.dep-modal-content .sbs-latex-column,
.dep-modal-content .sbs-lean-column {
  min-width: 0;  /* Allow shrinking below content size */
  overflow: hidden;  /* Prevent content overflow */
}

/* LaTeX proof toggle in modal */
.dep-modal-content .proof_wrapper {
  margin-top: 0.5rem;
}

.dep-modal-content .proof_heading {
  cursor: pointer;
}

/* Lean code max height in modal */
.dep-modal-content .lean-code {
  max-height: 400px;
  overflow-y: auto;
}

/* Modal footer with blueprint link - simple text style, no border */
.dep-modal-content .dep-modal-footer {
  margin-top: 0.75rem;
  text-align: right;
}

.dep-modal-content .dep-modal-footer .blueprint-link {
  color: var(--sbs-link, #0066cc);
  text-decoration: none;
  font-size: 0.9rem;
}

.dep-modal-content .dep-modal-footer .blueprint-link:hover {
  text-decoration: underline;
  color: var(--sbs-link-hover, #0055aa);
}

/* ========== Breadcrumb Navigation ========== */
.breadcrumb {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

.breadcrumb a {
  color: var(--bp-primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--bp-text-muted);
}

/* ========== Dashboard Page ========== */
.dg-dashboard-page .wrapper {
  display: flex;
}

.dg-dashboard-page .content {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
}

.dg-dashboard-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.75rem;
}

.dg-full-graph-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.dg-full-graph-link {
  display: inline-block;
  color: var(--bp-primary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--bp-primary);
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

.dg-full-graph-link:hover {
  background-color: var(--bp-primary);
  color: #fff;
  text-decoration: none;
}

/* ---- Stats Grid ---- */
.dg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.dg-stat-card {
  background: var(--bp-bg-alt);
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  text-align: center;
}

.dg-stat-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.dg-stat-label {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 0.25rem;
}

/* Status color accents on stat cards */
.dg-stat-fully-proven { border-top: 3px solid var(--sbs-status-fully-proven); }
.dg-stat-proven       { border-top: 3px solid var(--sbs-status-proven); }
.dg-stat-sorry        { border-top: 3px solid var(--sbs-status-sorry); }
.dg-stat-wip          { border-top: 3px solid var(--sbs-status-wip); }
.dg-stat-not-ready    { border-top: 3px solid var(--sbs-status-not-ready); }
.dg-stat-mathlib-ready { border-top: 3px solid var(--sbs-status-mathlib-ready); }
.dg-stat-axiom        { border-top: 3px solid var(--sbs-status-axiom); }

/* ---- Declaration Table ---- */
.dg-table-wrapper {
  overflow-x: auto;
}

.dg-declaration-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  table-layout: fixed;
}

/* 4-column tables: Name (40%) | Status (15%) | Type (15%) | Module (30%) */
.dg-declaration-table colgroup { display: table-column-group; }
.dg-declaration-table th:nth-child(1),
.dg-declaration-table td:nth-child(1) { width: 40%; }
.dg-declaration-table th:nth-child(2),
.dg-declaration-table td:nth-child(2) { width: 15%; }
.dg-declaration-table th:nth-child(3),
.dg-declaration-table td:nth-child(3) { width: 15%; }
.dg-declaration-table th:nth-child(4),
.dg-declaration-table td:nth-child(4) { width: 30%; }

/* 2-column tables (axiom page): Name (60%) | Module (40%) */
.axiom-section .dg-declaration-table th:nth-child(1),
.axiom-section .dg-declaration-table td:nth-child(1) { width: 60%; }
.axiom-section .dg-declaration-table th:nth-child(2),
.axiom-section .dg-declaration-table td:nth-child(2) { width: 40%; }

.dg-declaration-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--bp-border);
  font-weight: 600;
  color: var(--bp-text);
  white-space: nowrap;
}

.dg-declaration-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--bp-border);
  color: var(--bp-text);
}

.dg-declaration-table tbody tr:hover {
  background-color: var(--bp-bg-alt);
}

.dg-declaration-table a {
  color: var(--bp-primary);
  text-decoration: none;
}

.dg-declaration-table a:hover {
  text-decoration: underline;
}

.dg-module-cell {
  font-size: 0.8rem;
  color: var(--bp-text-muted);
  font-family: monospace;
}

/* ---- Chapter-Grouped Declarations ---- */
.dg-chapter-groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dg-chapter-group details {
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  overflow: hidden;
}

.dg-chapter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--bp-bg-alt);
  cursor: pointer;
  user-select: none;
  font-size: 0.925rem;
}

.dg-chapter-summary:hover {
  background: var(--sbs-graph-card-hover, var(--bp-bg-alt));
}

.dg-chapter-title {
  font-weight: 600;
  color: var(--bp-text);
}

.dg-chapter-count {
  font-size: 0.8rem;
  color: var(--bp-text-muted);
  margin-left: 1rem;
  white-space: nowrap;
}

.dg-chapter-table-wrapper {
  border-top: 1px solid var(--bp-border);
}

.dg-chapter-table-wrapper .dg-table-wrapper {
  overflow-x: auto;
}

/* Remove outer border from tables inside chapter groups (the details border is enough) */
.dg-chapter-table-wrapper .dg-declaration-table {
  border: none;
}

/* ---- SBS Content on Individual Node Pages ---- */
.dg-node-sbs-section {
  margin-bottom: 1.5rem;
}

.dg-node-sbs-section h2 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem 0;
}

/* Ensure sbs-container renders properly on node pages (same treatment as modals) */
.dg-node-sbs-section .sbs-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-left: 0;
  margin-bottom: 1rem;
  max-width: 100%;
  overflow: hidden;
}

.dg-node-sbs-section .sbs-heading,
.dg-node-sbs-section .sbs-statement,
.dg-node-sbs-section .sbs-proof-latex,
.dg-node-sbs-section .sbs-signature,
.dg-node-sbs-section .sbs-proof-lean,
.dg-node-sbs-section .sbs-latex-column,
.dg-node-sbs-section .sbs-lean-column {
  min-width: 0;
  overflow: hidden;
}

.dg-node-sbs-section .proof_wrapper {
  margin-top: 0.5rem;
}

.dg-node-sbs-section .proof_heading {
  cursor: pointer;
}

.dg-node-sbs-section .lean-code {
  max-height: 500px;
  overflow-y: auto;
}

/* Hide above/below narrative content on individual node pages */
.dg-node-sbs-section .sbs-above-content,
.dg-node-sbs-section .sbs-above-spacer,
.dg-node-sbs-section .sbs-below-content,
.dg-node-sbs-section .sbs-below-spacer {
  display: none;
}

/* ---- Status Badges (in table and node page) ---- */
.dg-status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.dg-status-not-ready    { background: var(--sbs-status-not-ready); color: #fff; }
.dg-status-wip          { background: var(--sbs-status-wip); color: #fff; }
.dg-status-sorry        { background: var(--sbs-status-sorry); color: #fff; }
.dg-status-proven       { background: var(--sbs-status-proven); color: #000; }
.dg-status-fully-proven { background: var(--sbs-status-fully-proven); color: #fff; }
.dg-status-mathlib-ready { background: var(--sbs-status-mathlib-ready); color: #fff; }
.dg-status-axiom        { background: var(--sbs-status-axiom); color: #fff; }

/* ========== Individual Node Page ========== */
.dg-node-page .wrapper {
  display: flex;
}

.dg-node-page .content {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
}

.dg-node-title {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.dg-node-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bp-bg-alt);
  border: 1px solid var(--bp-border);
  border-radius: 6px;
}

.dg-node-detail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dg-detail-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 120px;
  flex-shrink: 0;
}

/* ---- Axiom Dependency Badges ---- */
.dg-axiom-deps-row {
  flex-basis: 100%;
}

.dg-axiom-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dg-axiom-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--sbs-status-axiom);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s;
}

.dg-axiom-badge:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #fff;
}

.dg-node-relations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.dg-node-relation-col h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

.dg-node-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dg-node-links li {
  padding: 0.25rem 0;
}

.dg-node-links a {
  color: var(--bp-primary);
  text-decoration: none;
}

.dg-node-links a:hover {
  text-decoration: underline;
}

/* ---- Subgraph Section ---- */
.dg-subgraph-section {
  margin-bottom: 2rem;
}

.dg-subgraph-section h2 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem 0;
}

.dg-subgraph-container {
  min-height: 200px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--sbs-graph-bg, var(--bp-bg-alt));
  overflow: hidden;
}

/* ========== Dark Mode SVG Overrides ========== */
/* These target CSS classes added to SVG elements by Dress/Graph/Svg.lean.
   Inline fill/stroke attributes are kept as fallbacks for standalone SVG viewing;
   dark mode overrides them via !important when the SVG is embedded in the page. */

/* --- Background --- */
html[data-theme="dark"] svg .graph-bg {
  fill: var(--sbs-graph-bg) !important;
}

/* --- Edges --- */
html[data-theme="dark"] svg .graph-edge {
  stroke: var(--sbs-graph-edge) !important;
}

html[data-theme="dark"] svg .graph-edge:hover {
  stroke: var(--sbs-graph-edge-hover) !important;
}

/* Arrowhead markers */
html[data-theme="dark"] svg .graph-arrowhead {
  fill: var(--sbs-graph-edge) !important;
}

/* --- Node text --- */
html[data-theme="dark"] svg .node-text {
  fill: #e0e0e0 !important;
}

/* White text on dark status backgrounds should remain white.
   SVG structure: <a> <shape class="node-shape status-*"/> <text class="node-text"/> </a>
   Use adjacent sibling combinator inside the <a>. */
html[data-theme="dark"] svg .status-sorry ~ .node-text,
html[data-theme="dark"] svg .status-fully-proven ~ .node-text,
html[data-theme="dark"] svg .status-wip ~ .node-text,
html[data-theme="dark"] svg .status-axiom ~ .node-text {
  fill: #ffffff !important;
}

/* --- Node stroke (border) --- */
html[data-theme="dark"] svg .node-shape {
  stroke: var(--sbs-graph-edge) !important;
}
html[data-theme="dark"] svg .node-shape.center-node {
  stroke: #4FC3F7 !important;
}

/* --- Node fill colors (dark mode adjusted) --- */
/* Slightly muted versions of the light-mode status colors for dark backgrounds */
html[data-theme="dark"] svg .status-not-ready {
  fill: #B56508 !important;
}

html[data-theme="dark"] svg .status-wip {
  fill: #007B8A !important;
}

html[data-theme="dark"] svg .status-sorry {
  fill: #A12020 !important;
}

html[data-theme="dark"] svg .status-proven {
  fill: #4E9C52 !important;
}

html[data-theme="dark"] svg .status-fully-proven {
  fill: #155418 !important;
}

html[data-theme="dark"] svg .status-mathlib-ready {
  fill: #2E8BD4 !important;
}

html[data-theme="dark"] svg .status-axiom {
  fill: #6A4AA0 !important;
}

/* --- HTML status-dot-btn dark mode overrides --- */
/* These buttons use CSS classes instead of inline styles.
   Use the same muted colors as SVG overrides for consistency. */
html[data-theme="dark"] .status-dot-btn.status-not-ready { background: #B56508; }
html[data-theme="dark"] .status-dot-btn.status-wip { background: #007B8A; }
html[data-theme="dark"] .status-dot-btn.status-sorry { background: #A12020; }
html[data-theme="dark"] .status-dot-btn.status-proven { background: #4E9C52; }
html[data-theme="dark"] .status-dot-btn.status-fully-proven { background: #155418; }
html[data-theme="dark"] .status-dot-btn.status-mathlib-ready { background: #2E8BD4; }
html[data-theme="dark"] .status-dot-btn.status-axiom { background: #6A4AA0; }

/* ========== Compact Toolbar (inside controls sidebar) ========== */
.dep-graph-toolbar-compact {
  position: static;
  max-width: none;
}

/* ========== Compact Legend (subgraph controls on node page) ========== */
.dg-subgraph-controls .dep-graph-legend {
  width: auto;
  font-size: 0.75rem;
  padding: 0.375rem;
}

.dg-subgraph-controls .dep-graph-legend .legend-title {
  font-size: 0.7rem;
  margin-bottom: 0.375rem;
}

.dg-subgraph-controls .dep-graph-legend .legend-swatch {
  width: 12px;
  height: 12px;
}

.dg-subgraph-controls .dep-graph-legend .legend-shape {
  width: 12px;
  height: 10px;
}

/* ========== Subgraph Controls (node page wrapper) ========== */
.dg-subgraph-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--sbs-graph-bg, var(--bp-bg-alt));
  overflow: hidden;
}

.dg-subgraph-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  align-self: start;
}

.dg-subgraph-controls .dep-graph-toolbar {
  position: static;
  max-width: none;
}

.dg-subgraph-wrapper .dg-subgraph-viewport {
  border-left: 1px solid var(--bp-border);
}

.dg-subgraph-wrapper .dg-subgraph-container {
  border: none;
  border-radius: 0;
}

/* ========== Depth Slider ========== */
.subgraph-depth-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.subgraph-depth-control label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bp-text);
  white-space: nowrap;
}

.subgraph-depth-control .depth-slider {
  flex: 1;
  min-width: 60px;
  height: 4px;
  accent-color: var(--bp-primary, #396282);
  cursor: pointer;
}

.subgraph-depth-control .depth-value {
  font-weight: 700;
  color: var(--bp-primary, #396282);
}

.subgraph-depth-control .depth-max {
  color: var(--sbs-text-muted, #666);
  font-size: 0.85rem;
}

.subgraph-depth-control input[type="range"] {
  /* Ensure datalist ticks are visible */
  list-style-type: none;
}

/* ========== Direction Toggle ========== */
.direction-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--bp-border, #d0d0d0);
  border-radius: 4px;
  overflow: hidden;
}

.direction-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  background: var(--bp-bg, #fff);
  color: var(--bp-text, #333);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.direction-btn:not(:last-child) {
  border-right: 1px solid var(--bp-border, #d0d0d0);
}

.direction-btn:hover {
  background: var(--bp-bg-alt, #f5f5f5);
}

.direction-btn.active {
  background: var(--bp-primary, #396282);
  color: #fff;
}

/* Loading state for subgraph fetch */
.subgraph-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--bp-text-muted, #888);
  font-size: 0.875rem;
}

/* ========== Modal Legend + Toolbar Row ========== */
.sbs-modal-legend-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.sbs-modal-legend-toolbar .dep-graph-legend {
  flex: 1;
}

.sbs-modal-legend-toolbar .dep-graph-toolbar {
  position: static;
  max-width: none;
  flex-shrink: 0;
}