/* tooltip.css — single global tooltip visual (AESTHETIC §7). Tokens only. */
#ct-tooltip {
  position: fixed; z-index: 400; pointer-events: none;
  display: flex; gap: var(--sp-3); align-items: flex-start;
  min-width: 200px; max-width: 320px; padding: 12px 14px;
  background: var(--bg-deep); border: 1px solid var(--accent); border-radius: 1px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 18px var(--accent-soft);
  animation: ctIn 120ms cubic-bezier(.2,.7,.2,1);
}
#ct-tooltip[hidden] { display: none; }
#ct-tooltip .ct-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
#ct-tooltip .ct-icon svg { width: 22px; height: 22px; }
#ct-tooltip .ct-icon .glyph { font-family: var(--mono); font-size: 18px; }
#ct-tooltip .ct-label { font-family: var(--display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
#ct-tooltip .ct-desc { font-family: var(--serif); font-style: italic; font-size: 12px; line-height: 1.45; color: var(--ink-mid); }
@keyframes ctIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }