/* ── Nexus (public/js/nexus.js) ─────────────────────────────────────────────
   The linked repository's folders, notes and filing routes, read-only. Built from the dashboard's
   own tokens: .panel (board.css), .empty-state and the --text / --text-secondary / --border colours
   (main.css). Small text on muted surfaces is --text-secondary, the standing design decision. */

#screen-nexus [hidden] {
  display: none !important;
}

.nexus-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  max-width: 880px;
  -webkit-overflow-scrolling: touch;
}

.nexus-summary {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.nexus-panel {
  margin-bottom: 16px;
}

.nexus-panel h3 {
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.nexus-note {
  margin: 4px 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* Routes and the repository's own taxonomy: a label, then where it points. */
.nexus-routes,
.nexus-taxonomy {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.nexus-routes li,
.nexus-taxonomy li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.nexus-routes li:last-child,
.nexus-taxonomy li:last-child {
  border-bottom: 0;
}

.nexus-routes code,
.nexus-taxonomy code {
  font-size: 12px;
  color: var(--text-secondary);
}

.nexus-taxonomy li span,
.nexus-route-options {
  color: var(--text-secondary);
}

/* The tree. Indentation comes from --nexus-depth on each item so a collapsed branch costs no DOM. */
.nexus-tree,
.nexus-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nexus-tree li {
  margin: 0;
}

.nexus-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px 4px calc(8px + var(--nexus-depth, 0) * 18px);
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.nexus-row:hover,
.nexus-row:focus-visible {
  background: var(--border);
}

.nexus-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexus-count {
  color: var(--text-secondary);
  font-size: 12px;
}

.nexus-dir-summary {
  margin: 0 0 4px;
  padding-left: calc(34px + var(--nexus-depth, 0) * 18px);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.nexus-badge {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11px;
}

@media (max-width: 640px) {
  .nexus-content {
    padding: 16px;
  }
}