/* Data browser (#nodes-body, built by js/node-browser.js and shown in a
   detail tab): an intro line, the filter box (reusing .drugs-filter), a row
   of selects, a count line, the column header and the node rows. A row is a
   <div> because the grade pill is itself a <button> (it pins its tooltip on
   touch) and buttons cannot nest, so the clickable half is the inner
   .node-main. */
#nodes-body { padding: 4px 0 8px; }
.node-intro { color: var(--muted); font-size: 11px; margin: 0 2px 8px; }
/* A link-looking button: it acts in place (opens the About popup's data-file
   dropdown, opens the Data browser tab) rather than navigating, so it is a
   <button> wearing a link's clothes. Shared by the browser's "The same data as
   files" and the sourcing popup's Data-browser line. */
.node-datafiles, .src-browser-link {
  padding: 0;
  font: inherit;
  color: var(--accent-bright);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
/* The grid the header and the rows share. Two levels, because the clickable
   half of a row is a <button> that cannot hold the grade pill: the outer grid
   is `grade | the rest`, the inner one `name | notion | kind`. The header
   repeats that structure exactly (see node-browser.js), so each key sits over
   the cell it names whatever the text in it. */
/* The header and the rows scroll together inside one horizontal scroller, so
   the columns keep a legible width instead of shrinking with the panel: below
   --node-grid-w the whole grid slides sideways, keys still over their cells. */
.node-grid { overflow-x: auto; overscroll-behavior-x: contain; }
.node-head, .node-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  min-width: var(--node-grid-w, 520px);
}
.node-head-main, .node-main {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(190px, 1.6fr) minmax(110px, 1fr);
  align-items: baseline;
  gap: 6px;
  padding: 2px 4px;
}
/* A cell wraps inside its own column rather than pushing the grid around: an
   id like `5ht2a_terminal` has no space to break at. */
.node-head-cell, .node-name, .node-notion, .node-kind { overflow-wrap: anywhere; }
/* Column header: monospace + uppercase-free so it reads as a field name, not
   prose. */
.node-head {
  margin: 0 0 2px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--ink), 0.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--muted);
}
/* "grade" is wider than its 30px column; let it overhang rather than break in
   two, since the cell under it is a fixed-size pill. */
.node-head-cell { cursor: help; }
.node-head-grade { overflow-wrap: normal; white-space: nowrap; }
/* Make the columns visible: a hairline rule opening each one but the first, in
   the header and in every row alike. */
.node-head-notion, .node-head-kind, .node-notion, .node-kind {
  border-left: 1px solid rgba(var(--ink), 0.14);
  padding-left: 6px;
}
/* One kind selected: the kind cell would say on every row what the select right
   above the list already says, so the column goes and the three that are left
   share its width (also narrowing the grid, so it stops scrolling sideways
   sooner). Set on .node-grid by node-browser.js's apply(). */
.node-grid.no-kind .node-head-kind, .node-grid.no-kind .node-kind { display: none; }
.node-grid.no-kind .node-head-main, .node-grid.no-kind .node-main {
  grid-template-columns: minmax(110px, 1fr) minmax(190px, 1.6fr);
}
.node-grid.no-kind .node-head, .node-grid.no-kind .node-row {
  --node-grid-w: 390px;
}
/* That kind states its whole claim in the name (a circuit, a projection group), so
   the notion column is blank on every row: it goes too and the name takes the width,
   the kind having moved over to head it. Always paired with .no-kind. */
.node-grid.no-notion .node-head-notion, .node-grid.no-notion .node-notion {
  display: none;
}
.node-grid.no-notion .node-head-main, .node-grid.no-notion .node-main {
  grid-template-columns: minmax(110px, 1fr);
}
.node-grid.no-notion .node-head, .node-grid.no-notion .node-row {
  --node-grid-w: 240px;
}
/* Too narrow for four columns (a phone, or the panel back at sidebar width): the
   columns keep their width and the grid scrolls sideways instead of stacking,
   so a row always reads as one line across the same four fields. */
@media (max-width: 560px) {
  .node-head, .node-row { --node-grid-w: 460px; }
  .node-head-main, .node-main {
    grid-template-columns: minmax(95px, 1fr) minmax(165px, 1.6fr) minmax(95px, 1fr);
  }
  .node-grid.no-kind .node-head, .node-grid.no-kind .node-row {
    --node-grid-w: 340px;
  }
  .node-grid.no-kind .node-head-main, .node-grid.no-kind .node-main {
    grid-template-columns: minmax(95px, 1fr) minmax(165px, 1.6fr);
  }
  .node-grid.no-notion .node-head, .node-grid.no-notion .node-row {
    --node-grid-w: 200px;
  }
  .node-grid.no-notion .node-head-main, .node-grid.no-notion .node-main {
    grid-template-columns: minmax(95px, 1fr);
  }
}
.node-filters { display: flex; gap: 4px; margin-bottom: 6px; }
.node-select {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 6px;
  outline: none;
}
.node-select:focus { border-color: var(--accent); }
.node-count { color: var(--muted); font-size: 11px; margin: 0 2px 6px; }
.node-row { padding: 1px 0; }
/* Banded rows: with four columns of small text, a band per pair is what keeps
   the eye on one node's line all the way across. Zebra on the row (not the
   inner button) so the grade column is banded too. */
.node-list > .node-row:nth-child(even) { background: rgba(var(--ink), 0.05); }
.node-main {
  min-width: 0;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  border-radius: 4px;
}
.node-main.clickable { cursor: pointer; }
.node-main.clickable:hover { background: rgba(var(--ink), 0.08); }
.node-main:disabled { opacity: 0.45; }
.node-name { font-weight: 600; }
.node-notion { color: var(--muted); }
.node-kind { color: var(--muted); font-size: 11px; }
.node-more {
  margin: 6px 2px;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 6px;
  cursor: pointer;
}
.node-more:hover { color: var(--text); background: rgba(var(--ink), 0.12); }