/* pins.css - pin rail and annotations (audit B2). Variables first, one
 * dark block (A12 rule for every module stylesheet). */

:root {
  --pin-bg: #f6f3ec;
  --pin-border: #d8d2c4;
  --pin-text: #2b2a26;
  --pin-muted: #6b675c;
  --pin-accent: #854f0b;
  --pin-stale: #a5341d;
}

body.dark {
  --pin-bg: #23211c;
  --pin-border: #3c382f;
  --pin-text: #e8e6df;
  --pin-muted: #a8a294;
  --pin-accent: #d9a35c;
  --pin-stale: #ef9a8d;
}

#pins {
  border: 1px solid var(--pin-border);
  background: var(--pin-bg);
  color: var(--pin-text);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 12.5px;
  max-height: 30%;
  overflow-y: auto;
}
#pins[hidden] { display: none !important; }

.pins-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pins-title { font-weight: 600; }
.pins-count { color: var(--pin-muted); font-size: 11px; }
.pins-empty { color: var(--pin-muted); line-height: 1.45; }

.pin-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.pin-jump {
  font-family: var(--mono, monospace);
  font-size: 11px;
  border: 1px solid var(--pin-border);
  border-left: 3px solid var(--pin-accent);
  border-radius: 4px;
  background: transparent;
  color: var(--pin-text);
  padding: 2px 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}
.pin-stale .pin-jump { border-left-color: var(--pin-stale); color: var(--pin-muted); cursor: default; }
.pin-note {
  flex: 1 1 auto;
  font-size: 11.5px;
  border: 1px solid var(--pin-border);
  border-radius: 4px;
  background: transparent;
  color: var(--pin-text);
  padding: 2px 7px;
  min-width: 60px;
}
.pin-ref, .pin-remove {
  border: 1px solid var(--pin-border);
  border-radius: 4px;
  background: transparent;
  color: var(--pin-muted);
  font-size: 10.5px;
  padding: 2px 6px;
  cursor: pointer;
}
.pin-ref:hover, .pin-remove:hover { color: var(--pin-text); }

/* the pin button rides on the node action bar; its own class, never a
 * .node-action-btn (that set is exactly four, by contract) */
.node-actions-pin {
  font-size: 10px;
  padding: 2px 4px;
  border: none;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
}
.node-actions-pin:hover { opacity: 1; }