laminark 0.1.0 → 2.21.7

package/plugin/ui/styles.css

@@ -840,7 +840,7 @@ body {
   height: 100%;
 }
 
-/* Graph legend — collapsed by default, expands on hover */
+/* Graph legend */
 .graph-legend {
   position: absolute;
   bottom: 16px;
@@ -848,22 +848,14 @@ body {
   background: rgba(13, 17, 23, 0.85);
   border: 1px solid var(--border);
   border-radius: 8px;
-  padding: 6px;
+  padding: 12px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 5;
   display: flex;
   flex-direction: column;
-  gap: 0;
-  pointer-events: auto;
-  overflow: hidden;
-  transition: padding 200ms ease, gap 200ms ease;
-  cursor: default;
-}
-
-.graph-legend:hover {
-  padding: 12px;
   gap: 6px;
+  pointer-events: auto;
 }
 
 .graph-legend-title {
@@ -872,12 +864,6 @@ body {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-muted);
-  margin-bottom: 0;
-  white-space: nowrap;
-  transition: margin-bottom 200ms ease;
-}
-
-.graph-legend:hover .graph-legend-title {
   margin-bottom: 2px;
 }
 
@@ -889,15 +875,6 @@ body {
   font-size: 12px;
   color: var(--text);
   line-height: 1;
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: max-height 200ms ease, opacity 200ms ease;
-}
-
-.graph-legend:hover .graph-legend-item {
-  max-height: 20px;
-  opacity: 1;
 }
 
 .legend-color {
@@ -1261,74 +1238,13 @@ body {
 
 /* Settings view */
 #settings-view {
-  overflow: hidden;
-}
-
-#settings-view.active {
-  display: flex;
-}
-
-.settings-layout {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.settings-sidebar {
-  width: 200px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  padding: 12px 0;
-  background: var(--surface);
   overflow-y: auto;
 }
 
-.settings-sidebar-item {
-  padding: 10px 16px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-muted);
-  border-radius: 4px;
-  margin: 2px 8px;
-  transition: background 0.15s, color 0.15s;
-  user-select: none;
-}
-
-.settings-sidebar-item:hover {
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
-}
-
-.settings-sidebar-item.active {
-  background: rgba(88, 166, 255, 0.1);
-  color: var(--accent);
-}
-
-.settings-sidebar-item-danger {
-  margin-top: auto;
-}
-
-.settings-sidebar-item-danger.active {
-  background: rgba(248, 81, 73, 0.1);
-  color: var(--danger);
-}
-
-.settings-content {
-  flex: 1;
-  overflow-y: auto;
+.settings-container {
+  max-width: 720px;
+  margin: 0 auto;
   padding: 24px;
-  min-width: 0;
-}
-
-.settings-panel {
-  display: none;
-}
-
-.settings-panel.active {
-  display: block;
 }
 
 .settings-heading {
@@ -1374,14 +1290,6 @@ body {
   letter-spacing: 0.04em;
 }
 
-.system-info-grid {
-  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-}
-
-.system-info-grid .stat-value {
-  font-size: 16px;
-}
-
 /* Success message */
 .settings-success {
   padding: 10px 14px;
@@ -2092,135 +2000,28 @@ body {
 }
 
 /* =========================================================================
- * Help View — Sidebar Tree Layout
+ * Help View
  * ========================================================================= */
 
 #help-view {
-  overflow: hidden;
-}
-
-#help-view.active {
-  display: flex;
-  flex-direction: row;
-}
-
-/* Sidebar */
-.help-sidebar {
-  width: 240px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--surface);
-}
-
-.help-sidebar-search {
-  padding: 12px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.help-tree-container {
-  flex: 1;
   overflow-y: auto;
-  padding: 8px 0;
-}
-
-.help-tree {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.help-tree-item {
-  user-select: none;
-}
-
-.help-tree-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-muted);
-  border-radius: 4px;
-  margin: 0 8px;
-  transition: background 0.15s, color 0.15s;
-}
-
-.help-tree-label:hover {
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
-}
-
-.help-tree-label.active {
-  background: rgba(88, 166, 255, 0.1);
-  color: var(--accent);
-}
-
-.help-tree-toggle {
-  width: 16px;
-  flex-shrink: 0;
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.15s;
-  text-align: center;
-}
-
-.help-tree-item.expanded > .help-tree-label .help-tree-toggle {
-  transform: rotate(90deg);
-}
-
-.help-tree-children {
-  list-style: none;
-  padding: 0 0 0 20px;
-  margin: 0;
-  display: none;
-}
-
-.help-tree-item.expanded > .help-tree-children {
-  display: block;
-}
-
-.help-tree-child-label {
-  display: block;
-  padding: 5px 12px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-muted);
-  border-radius: 4px;
-  margin: 0 8px;
-  transition: background 0.15s, color 0.15s;
-}
-
-.help-tree-child-label:hover {
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
-}
-
-.help-tree-child-label.active {
-  color: var(--accent);
 }
 
-/* Content area */
-.help-content-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px 32px;
-  min-width: 0;
+.help-container {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 24px;
 }
 
 .help-section {
-  margin-bottom: 0;
+  margin-bottom: 32px;
 }
 
 .help-section-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--text);
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border);
 }
@@ -2695,103 +2496,6 @@ body {
   color: var(--warning);
 }
 
-/* Cross-Project Access dual-list widget */
-.cross-access-lists {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.cross-access-list {
-  flex: 1;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.cross-access-list-header {
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  padding: 8px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.cross-access-items {
-  list-style: none;
-  max-height: 200px;
-  overflow-y: auto;
-  min-height: 60px;
-}
-
-.cross-access-items:empty::after {
-  content: '(none)';
-  display: block;
-  padding: 12px;
-  color: var(--text-muted);
-  font-style: italic;
-  font-size: 13px;
-}
-
-.cross-access-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--border);
-  transition: background var(--transition);
-}
-
-.cross-access-item:last-child {
-  border-bottom: none;
-}
-
-.cross-access-item:hover {
-  background: rgba(88, 166, 255, 0.06);
-}
-
-.cross-access-item-name {
-  font-size: 13px;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cross-access-add-btn,
-.cross-access-remove-btn {
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 14px;
-  width: 26px;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all var(--transition);
-}
-
-.cross-access-add-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: rgba(88, 166, 255, 0.1);
-}
-
-.cross-access-remove-btn:hover {
-  border-color: var(--danger);
-  color: var(--danger);
-  background: rgba(248, 81, 73, 0.1);
-}
-
 /* =========================================================================
  * D3.js Graph SVG Styles
  * ========================================================================= */
@@ -3147,710 +2851,60 @@ g.node-group.search-match path.node-shape {
 }
 
 /* ====================================================================
-   Graph Freeze Button (pause/resume live updates)
+   Path Overlay Styles
    ==================================================================== */
 
-.graph-freeze-btn {
-  width: 32px;
-  height: 32px;
-  background: rgba(13, 17, 23, 0.85);
+.paths-toggle-btn {
+  background: transparent;
   border: 1px solid var(--border);
-  border-radius: var(--radius);
   color: var(--text-muted);
+  padding: 4px 6px;
+  border-radius: var(--radius);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  transition: color var(--transition), border-color var(--transition), background var(--transition);
+  transition: all var(--transition);
 }
 
-.graph-freeze-btn:hover {
+.paths-toggle-btn:hover {
   color: var(--text);
   border-color: var(--text-muted);
 }
 
-.graph-freeze-btn.active {
-  color: var(--warning);
-  border-color: var(--warning);
-  background: rgba(210, 153, 34, 0.12);
+.paths-toggle-btn.active {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: rgba(88, 166, 255, 0.1);
 }
 
-/* ====================================================================
-   Graph Sync Button (stale data indicator)
-   ==================================================================== */
+/* Animated dashed line for active paths */
+.path-line-active {
+  animation: path-dash-flow 1.5s linear infinite;
+}
 
-.graph-sync-btn {
-  position: absolute;
-  top: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(13, 17, 23, 0.85);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  padding: 4px 12px;
-  font-size: 12px;
-  cursor: pointer;
-  z-index: 6;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  transition: all 200ms ease;
-}
-
-.graph-sync-btn.hidden { display: none; }
-
-.graph-sync-btn.stale {
-  border-color: var(--warning);
-  color: var(--warning);
-  animation: pulse 2s infinite;
-}
-
-.graph-sync-btn:hover {
-  color: var(--text);
-  border-color: var(--text-muted);
-}
-
-.graph-sync-btn.stale:hover {
-  border-color: var(--warning);
-  color: var(--text);
-}
-
-/* ====================================================================
-   Pathfinder Styles
-   ==================================================================== */
-
-.paths-toggle-btn {
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  padding: 4px 6px;
-  border-radius: var(--radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition);
-}
-
-.paths-toggle-btn:hover {
-  color: var(--text);
-  border-color: var(--text-muted);
-}
-
-.paths-toggle-btn.active {
-  color: var(--color-reference);
-  border-color: var(--color-reference);
-  background: rgba(240, 136, 62, 0.1);
-}
-
-/* Pathfinder start/end node indicators */
-g.node-group.pathfinder-start path.node-shape {
-  stroke: #3fb950;
-  stroke-width: 3.5;
-  filter: drop-shadow(0 0 6px rgba(63, 185, 80, 0.7));
-}
-
-g.node-group.pathfinder-end path.node-shape {
-  stroke: #f85149;
-  stroke-width: 3.5;
-  filter: drop-shadow(0 0 6px rgba(248, 81, 73, 0.7));
-}
-
-/* Path-highlighted edges */
-line.edge.path-highlight {
-  stroke: #f0883e !important;
-  stroke-width: 3.5 !important;
-  opacity: 1 !important;
-  filter: drop-shadow(0 0 3px rgba(240, 136, 62, 0.6));
-}
-
-/* Pathfinder info bar */
-.pathfinder-info {
-  position: absolute;
-  bottom: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(13, 17, 23, 0.9);
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 12px;
-  color: var(--text);
-  white-space: nowrap;
-  z-index: 6;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  pointer-events: none;
-}
-
-/* =========================================================================
- * Help View — Enhanced Documentation
- * ========================================================================= */
-
-/* Help sidebar search input */
-.help-search-input {
-  width: 100%;
-  padding: 6px 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  color: var(--text);
-  font-size: 12px;
-  font-family: inherit;
-  transition: border-color var(--transition);
-}
-
-.help-search-input:focus {
-  border-color: var(--accent);
-  outline: none;
-}
-
-.help-search-input::placeholder {
-  color: var(--text-muted);
-}
-
-/* Subsection titles (h3-level) */
-.help-subsection-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text);
-  margin: 16px 0 8px;
-}
-
-/* Styled bullet list */
-.help-list {
-  list-style: none;
-  margin: 8px 0 16px;
-}
-
-.help-list li {
-  position: relative;
-  padding-left: 16px;
-  font-size: 13px;
-  color: var(--text);
-  line-height: 1.6;
-  margin-bottom: 4px;
-}
-
-.help-list li::before {
-  content: '\2022';
-  position: absolute;
-  left: 0;
-  color: var(--accent);
-}
-
-/* Tip / note callout box */
-.help-tip {
-  padding: 10px 14px;
-  margin: 12px 0;
-  background: rgba(88, 166, 255, 0.06);
-  border-left: 3px solid var(--accent);
-  border-radius: 0 var(--radius) var(--radius) 0;
-  font-size: 13px;
-  color: var(--text);
-  line-height: 1.5;
-}
-
-.help-tip strong {
-  color: var(--accent);
-}
-
-/* Screenshot containers */
-.help-screenshot {
-  margin: 12px 0;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  max-width: 100%;
-}
-
-.help-screenshot img {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-.help-screenshot-caption {
-  padding: 6px 12px;
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--surface);
-  text-align: center;
-}
-
-/* Cross-links */
-.help-crosslinks {
-  margin-top: 16px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border);
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.help-crosslink {
-  color: var(--accent);
-  cursor: pointer;
-  text-decoration: none;
-  margin-left: 4px;
-  transition: color var(--transition);
-}
-
-.help-crosslink:hover {
-  color: var(--accent-hover);
-  text-decoration: underline;
-}
-
-/* No results state for search */
-.help-no-results {
-  text-align: center;
-  color: var(--text-muted);
-  padding: 48px 16px;
-  font-size: 14px;
-}
-
-/* Help table (key-value, shortcuts) */
-.help-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 8px 0;
-}
-
-.help-table td {
-  padding: 6px 8px;
-  font-size: 13px;
-  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
-  vertical-align: top;
-}
-
-.help-table td:first-child {
-  white-space: nowrap;
-  width: 180px;
-  color: var(--text);
-}
-
-.help-table td:last-child {
-  color: var(--text-muted);
-}
-
-/* =========================================================================
-   Tool Topology View
-   ========================================================================= */
-
-/* Toolbar */
-.tools-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 6px 16px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.tools-toolbar-left,
-.tools-toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tools-layout-btn {
-  padding: 4px 12px;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  font-size: 12px;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-
-.tools-layout-btn:hover {
-  border-color: var(--text-muted);
-  color: var(--text);
-}
-
-.tools-layout-btn.active {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: rgba(88, 166, 255, 0.08);
-}
-
-.tools-separator {
-  color: var(--border);
-  font-size: 14px;
-}
-
-.tools-toggle-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--text-muted);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.tools-toggle-label input[type="checkbox"] {
-  accent-color: var(--accent);
-}
-
-.tools-filter-select {
-  padding: 4px 8px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.tools-filter-select:focus {
-  border-color: var(--accent);
-  outline: none;
-}
-
-/* Content area */
-#tools-view.active {
-  display: flex;
-  flex-direction: column;
-}
-
-.tools-content-row {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-}
-
-.tools-graph-area {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-#tools-svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  background: var(--bg);
-}
-
-.tools-graph-stats {
-  position: absolute;
-  bottom: 8px;
-  left: 12px;
-  font-size: 11px;
-  color: var(--text-muted);
-  pointer-events: none;
+@keyframes path-dash-flow {
+  to {
+    stroke-dashoffset: -20;
+  }
 }
 
-/* Tool nodes */
-.tool-node {
-  transition: opacity 0.15s;
+/* Waypoint markers */
+.waypoint-marker circle {
+  transition: r 0.15s ease;
 }
 
-.tool-node.selected {
-  stroke: #ffffff !important;
-  stroke-width: 3 !important;
-  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5));
+.waypoint-marker:hover circle {
+  filter: brightness(1.3);
 }
 
-/* Tool edges */
-.tool-edge {
+/* Path label */
+.path-label {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   pointer-events: none;
 }
 
-/* Tool labels */
-.tool-label {
-  user-select: none;
-}
-
-/* Detail panel */
-.tools-detail-panel {
-  width: var(--panel-width);
-  background: var(--surface);
-  border-left: 1px solid var(--border);
-  overflow-y: auto;
-  transition: transform var(--transition);
-  flex-shrink: 0;
-}
-
-.tools-detail-panel.hidden {
-  display: none;
-}
-
-.tool-status-badge {
-  display: inline-block;
-  padding: 1px 8px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.tool-status-badge.active {
-  background: rgba(63, 185, 80, 0.15);
-  color: var(--success);
-}
-
-.tool-status-badge.stale {
-  background: rgba(210, 153, 34, 0.15);
-  color: var(--warning);
-}
-
-.tool-status-badge.demoted {
-  background: rgba(248, 81, 73, 0.15);
-  color: var(--danger);
-}
-
-.tool-description {
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.5;
-  margin: 4px 0;
-}
-
-.tool-co-occurring-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 0;
-  color: var(--text);
-  font-size: 12px;
-  transition: color var(--transition);
-}
-
-.tool-co-occurring-item:hover {
-  color: var(--accent);
-}
-
-.tool-co-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tool-co-count {
-  color: var(--text-muted);
-  font-size: 11px;
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-
-/* Session flow strip */
-.tools-session-strip {
-  flex-shrink: 0;
-  background: var(--surface);
-  border-top: 1px solid var(--border);
-  padding: 8px 16px;
-  max-height: 140px;
-  overflow-y: auto;
-}
-
-.tools-session-strip-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 500;
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.tools-session-strip-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tools-session-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tools-session-id {
-  color: var(--text-muted);
-  font-size: 10px;
-  font-family: monospace;
-  flex-shrink: 0;
-  width: 60px;
-}
-
-.tools-session-tools {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  overflow-x: auto;
-  flex: 1;
-  min-width: 0;
-}
-
-.tools-session-arrow {
-  color: var(--text-muted);
-  font-size: 10px;
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-
-.tools-session-chip {
-  display: inline-block;
-  padding: 1px 6px;
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  font-size: 10px;
-  color: var(--text);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.tools-session-more {
-  color: var(--text-muted);
-  font-size: 10px;
-  flex-shrink: 0;
-}
-
-.tools-session-empty {
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-/* =========================================================================
-   Database Hygiene
-   ========================================================================= */
-
-.hygiene-summary-row {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
-}
-
-.hygiene-stat {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.hygiene-stat strong {
-  color: var(--text);
-}
-
-.hygiene-stat.hy-high strong {
-  color: #f85149;
-}
-
-.hygiene-stat.hy-medium strong {
-  color: #d29922;
-}
-
-.hygiene-table-wrap {
-  max-height: 400px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-}
-
-.hygiene-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.hygiene-table th {
-  position: sticky;
-  top: 0;
-  background: var(--bg-secondary);
-  padding: 6px 8px;
-  text-align: left;
-  font-weight: 500;
-  font-size: 11px;
-  color: var(--text-muted);
-  border-bottom: 1px solid var(--border);
-}
-
-.hygiene-table td {
-  padding: 5px 8px;
-  border-bottom: 1px solid rgba(48, 54, 61, 0.3);
-  vertical-align: top;
-}
-
-.hygiene-table .mono {
-  font-family: var(--font-mono, monospace);
-  font-size: 11px;
-}
-
-.hygiene-preview {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-.hy-row-high {
-  background: rgba(248, 81, 73, 0.06);
-}
-
-.hy-row-medium {
-  background: rgba(210, 153, 34, 0.06);
-}
-
-.hy-signal {
-  display: inline-block;
-  font-size: 10px;
-  padding: 1px 5px;
-  border-radius: 3px;
-  background: rgba(110, 118, 129, 0.2);
-  color: var(--text-muted);
-  margin-right: 2px;
-}
-
-.hygiene-signals {
-  white-space: nowrap;
-}
-
-.hygiene-distribution {
-  margin: 8px 0;
-}
-
-.hygiene-histogram {
-  display: flex;
-  align-items: flex-end;
-  gap: 3px;
-  height: 100px;
-  padding: 4px 0;
-}
-
-.hygiene-histogram-bar-wrap {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  justify-content: flex-end;
-}
-
-.hygiene-histogram-bar {
-  width: 100%;
-  min-height: 2px;
-  background: var(--accent, #58a6ff);
-  border-radius: 2px 2px 0 0;
-  transition: height 0.2s ease;
-}
-
-.hygiene-histogram-bar:hover {
-  background: var(--accent-hover, #79b8ff);
-}
-
-.hygiene-histogram-label {
-  font-size: 10px;
-  color: var(--text-muted, #8b949e);
-  margin-top: 2px;
+/* Path trail group */
+.path-trail {
+  pointer-events: all;
 }