/* callout.css — the floating dark hover/tap card, Genetic Matrix-inspired.
   Always dark regardless of page theme (see --callout-* tokens). */

.callout {
  position: absolute;
  z-index: 10;
  max-width: 260px;
  min-width: 200px;
  background: var(--callout-bg);
  color: var(--callout-text);
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.callout.is-open {
  opacity: 1;
  transform: translateY(0);
}

.callout::before {
  content: '';
  position: absolute;
  left: var(--pointer-left, 20px);
  width: 10px;
  height: 10px;
  background: var(--callout-bg);
  transform: translateX(-50%) rotate(45deg);
}

.callout--below::before {
  top: -5px;
}

.callout--above::before {
  bottom: -5px;
}

.callout-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.node-field {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.35;
}

.node-field-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Color scoped to .callout, not the bare .node-field-label/-value classes —
   the same markup (see chart.js's buildFieldsHTML) is reused inside the
   print sheet's light .print-card, which needs its own colors. See
   print.css for that half. */
.callout .node-field-label {
  color: var(--callout-label);
}

.callout .node-field-value {
  color: var(--callout-text);
}