/* Site-wide popup helper. Driven by assets/popup.js + data-tip-* attrs.
   Visual matches the existing dark surfaces (g-surf, g-border-2, etc).
   Two density levels: simple (text-only, smaller) and rich (with title). */

.popup {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 320px;
  background: var(--g-surf, #181a22);
  border: 1px solid var(--g-border-2, #353747);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Inter", "Segoe UI", sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--g-text-2, #a8aab8);
  box-shadow:
    0 12px 28px -8px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.4);
  opacity: 1;
  transition: opacity 0.14s ease;
}
.popup[hidden] { display: none; }

/* Click-pinned: text-selectable, cyan glow indicates locked state */
.popup-pinned {
  pointer-events: auto;
  user-select: text;
  border-color: var(--cyan, #38bdf8);
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.22),
    0 12px 28px -8px rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.45);
}

/* Rich popup (with a title) gets a bit more vertical breathing */
.popup-rich {
  padding: 10px 14px;
}

.popup-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--g-text, #ecedf2);
  margin-bottom: 4px;
}
.popup-body {
  color: var(--g-text-2, #a8aab8);
  letter-spacing: 0.05px;
}
.popup-meta {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--g-text-3, #6c6e7c);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--g-border, #262834);
}

/* When only body is visible (no title, no meta) - tighter look */
.popup:not(.popup-rich) {
  font-size: 12px;
  padding: 6px 10px;
}

/* Hint that something is hoverable / clickable */
[data-tip], [data-tip-title] { cursor: help; }
[data-tip-trigger="click"]   { cursor: pointer; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .popup { transition: none; }
}